CSS Gradient Generator
Generate CSS linear, radial, and conic gradients with a visual editor. Copy the CSS instantly.
How to use
- 1 Choose the gradient type: Linear, Radial, or Conic.
- 2 Click "+ Add Stop" to add color stops, pick a color for each, and adjust their position percentage.
- 3 Adjust the angle (for linear) or center point (for radial).
- 4 The live preview updates instantly — copy the CSS when you're happy with the result.
Key features
- Supports Linear, Radial, and Conic gradient types
- Add and remove color stops with dedicated buttons
- Real-time live preview
- Generates cross-browser CSS with proper fallbacks
CSS Gradients
CSS gradients are generated as <image> values, meaning they can be used anywhere a background image is accepted. They're rendered entirely by the browser — no external image file needed, no HTTP request, no scaling artifacts. Browsers have supported linear gradients since around 2012; conic gradients (great for pie-chart style effects and color wheels) became widely available in 2019–2021.
Gradients are defined with color stops — each stop is a color at a specific position along the gradient axis. Between stops, the browser interpolates colors. The interpolation color space (sRGB, oklch, display-p3) affects the midpoint colors you get and can make a significant visual difference, especially for vibrant hues.
Common Use Cases
Hero and banner backgrounds
Replace static background images with CSS gradients for instant rendering — no image download required and always crisp at any resolution.
Button and UI component fills
Subtle linear gradients on buttons give depth without resorting to images or complex box-shadow stacks.
Data visualization
Conic gradients can render pie chart segments entirely in CSS, and linear gradients work for progress indicators.
Text gradients
Apply a gradient to text using background-clip: text + color: transparent — a popular technique for logo and heading treatments.
Overlay and fade effects
Use a gradient that fades to transparent over an image to create a smooth text-over-image overlay without a separate element.
Dark mode backgrounds
Very subtle dark gradients (from #0f0f0f to #1a1a1a) give depth to dark mode interfaces without a flat black appearance.
CSS Gradient Types
Each gradient function creates a fundamentally different visual effect.
| Function | Direction | Typical use |
|---|---|---|
| linear-gradient() | Along a straight line at any angle | Hero backgrounds, button fills, text overlays |
| radial-gradient() | Outward from a center point (circle or ellipse) | Spotlight effects, vignettes, glow effects |
| conic-gradient() | Around a center point (like a clock) | Pie charts, color wheels, hard-stop checkerboards |
| repeating-linear-gradient() | Repeating stripes along a line | Progress bars, diagonal stripe patterns |