A subtle hero gradient
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}Two-color diagonal gradient. The classic indie-SaaS hero look — pleasant on the eye and friendly to text.
CSS Gradient Generator
Design CSS gradients visually with live code output.
Last updated
Preview2 stops
Color stops
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);What is a CSS gradient generator?
A CSS gradient generator is a visual editor for the linear-gradient, radial-gradient, and conic-gradient functions in CSS. It saves you from typing color stops by hand: drag colors on a track, watch the preview update, and copy production-ready CSS that drops directly into your stylesheet.
Gradients are everywhere in modern UI: hero sections, card overlays, button states, glow effects, dark-mode subtleties, loading skeletons, and decorative borders. Knowing how to read and write a gradient by hand makes you faster — but a visual generator is unbeatable for sketching ideas.
CSS supports three gradient types. *Linear* runs along a straight line at any angle. *Radial* radiates out from a point in a circle or ellipse. *Conic* sweeps colors around a center point like a clock face. Each one has its own use cases — and you can combine multiple gradients on a single background.
What you'll learn while designing gradients
- A gradient is defined by *direction* (or shape) and *color stops* — colors with optional positions.
- Two color stops at the same position create a *hard edge*, useful for stripes or split backgrounds.
- Modern color spaces like
oklchproduce smoother, more perceptually uniform gradients thanrgborhsl.
How to build a CSS gradient step by step
Pick a gradient type
Choose linear for a straight color sweep, radial for a circular fade, or conic for a sweep around a center point.
Set the angle or position
For linear, pick an angle in degrees (
0degis bottom-to-top in CSS). For radial and conic, set the center position.Add and arrange color stops
Add as many colors as you want. Drag each stop along the track to move its position. Two stops at the same position create a hard edge.
Preview on a real shape
Toggle between a full-width hero, a card, and a button to see how the gradient lands at different aspect ratios.
Copy the CSS
Copy the production-ready
backgrounddeclaration and paste it into your stylesheet.
CSS gradient quick reference
The three gradient functions and the parts that go inside them. Full reference on MDN: linear-gradient, radial-gradient, conic-gradient.
| Function | What it does | Example |
|---|---|---|
linear-gradient | Color sweep along a line | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | Color radiates from a point | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | Color sweeps around a center | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Tiled stripe pattern | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Color stop | A color with optional position | #6c8cff 25% |
| Hard stop | Same position twice → sharp edge | #000 50%, #fff 50% |
| Multiple gradients | Stacked on one element | background: g1, g2, g3; |
CSS gradient examples to try
A radial spotlight
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}Stack a translucent radial highlight on top of a solid color to fake a soft light source — great for dark-mode cards.
Hard-stop stripes
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Two stops at the same position create a sharp edge. Wrapping it in repeating-linear-gradient tiles the pattern.
Common CSS gradient mistakes
- Using too many color stops — three or four is usually enough; more often muddies the result.
- Forgetting that
0degis bottom-to-top in CSS gradients (different from many design tools where 0° is right). - Putting text on a high-contrast gradient without checking readability against both ends — keep WCAG contrast in mind.
CSS Gradient FAQ
How do I create a CSS gradient?
Use
linear-gradient, radial-gradient, or conic-gradient as the value of a background or background-image property. Each function takes a direction (or center) and a list of color stops.What is the difference between linear, radial, and conic gradients?
Linear gradients sweep colors along a straight line. Radial gradients radiate from a point in a circle or ellipse. Conic gradients sweep colors around a center point like a clock face.
Can I animate a CSS gradient?
Browsers don't interpolate between gradient images smoothly. The standard tricks are to animate
background-position for a moving gradient, transition between two gradient layers using opacity, or animate CSS custom properties used as color stops.Why does my gradient look banded?
Banding happens when too few discrete color steps span a wide area. Add intermediate stops, switch to a perceptual color space like
oklch, or apply a subtle dithering noise overlay.Are CSS gradients supported in all browsers?
Linear and radial gradients are universally supported. Conic gradients are supported in all modern browsers. For very old browsers you'd add a solid
background-color fallback before the gradient declaration.