CSS Gradient Generator
Create beautiful CSS gradients visually. Build linear, radial, and conic gradients with custom colors, positions, and angles.
Gradient Types
| Type | CSS | Use Case |
|---|---|---|
| Linear | linear-gradient() | Backgrounds, buttons |
| Radial | radial-gradient() | Spotlights, orbs |
| Conic | conic-gradient() | Pie charts, dials |
Linear Gradient Syntax
``css
/* Direction + colors */
.gradient {
background: linear-gradient(to right, #3B82F6, #8B5CF6);
}
/* Angle */
.angled {
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
}
/* Multiple stops */
.rainbow {
background: linear-gradient(
90deg,
red, orange, yellow, green, blue, violet
);
}
`
Gradient Directions
| Direction | CSS | Angle |
|---|---|---|
| Left to right | to right | 90deg |
| Top to bottom | to bottom | 180deg |
| Diagonal | to bottom right | 135deg |
Popular Gradient Combos
| Name | Colors |
|---|---|
| Sunset | #FF512F → #F09819 |
| Ocean | #2193B0 → #6DD5ED |
| Royal | #141E30 → #243B55 |
| Candy | #D53369 → #CBAD6D |
Export Options
Copy CSS code- Copy as Tailwind class
- Download as image
- Save gradient preset
Create stunning gradients for modern web designs.Gradients That Do Not Go Grey
A two-stop gradient between complementary colours passes through grey in the middle,
because linear interpolation in sRGB runs straight through the neutral axis.
Two fixes:
- Add a mid-stop in a hue between the two endpoints.
Interpolate in a better space:linear-gradient(in oklch, blue, yellow)travels
around the hue wheel instead of through the middle.Also worth knowing:
- Gradient banding shows on large areas with 8-bit colour. A subtle noise overlay hides
it, as does keeping the two stops closer together.
- Text on a gradient needs a contrast check against the *worst* point of the gradient,
not the average.
transparentis not neutral— it meansrgba(0,0,0,0), so fading to it passes
through grey. Fade to rgba(255,255,255,0) on a light background instead.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
Step Colour Contrast on white Safe for 50 #F5F9FF 1.06:1 backgrounds and fills 100 #EBF3FE 1.12:1 backgrounds and fills 200 #CEE0FD 1.34:1 backgrounds and fills 300 #B1CDFB 1.62:1 backgrounds and fills 400 #76A8F9 2.40:1 backgrounds and fills 500 #3B82F6 3.68:1 large text, borders 600 #326FD1 4.85:1 body text on white 700 #295BAC 6.59:1 body text on white 800 #204887 8.98:1 body text on white 900 #183462 12.31:1 body text on white
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.