CSS Gradient Generator

This tool supports three CSS gradient types: linear gradients (straight-line transitions controlled by angle), radial gradients (circular transitions expanding from a center point), and conic gradients (color sweeps around a center like a pie chart). Each type produces valid CSS that works in all modern browsers.

Click the "Add Stop" button to insert a new color stop at the largest gap between existing stops (up to 8 stops). Each stop has a color picker, HEX input, and position slider. Remove any stop by clicking the trash icon next to it. You must always have at least two stops.

Yes. Switch to the "CSS Code" tab and you will see both standard CSS output (with vendor prefixes and fallback) and a Tailwind CSS arbitrary value class. Click "Copy" to grab either format and paste it directly into your project.

The generated CSS includes a solid-color fallback plus the -webkit- vendor prefix alongside the standard syntax. Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Conic gradients are supported in Chrome 69+, Safari 12.1+, Firefox 83+, and Edge 79+.

Dewx provides free tools to help teams be more productive. Beyond design utilities, Dewx is an AI-powered business OS that unifies your inbox (WhatsApp, LinkedIn, Gmail), CRM, outreach, project management, and analytics into one platform. Join the free plan to run your entire business from a single dashboard.