Tool · Gradient generator
CSS gradient generator.
Build linear, radial, and conic gradients with custom color stops, exact positions, angle control, and copy-ready CSS.
Drag a stop to move it. Double-click the track to add one.
2 stops
Presets
Gradient CSS, briefly.
Linear gradients move along a straight axis. Use them for interface surfaces, subtle backgrounds, and directional lighting.
Radial gradients spread from a center point. They work well for spotlights, depth, and circular color transitions.
Conic gradients rotate around a center point. They are useful for wheels, meters, and angular color systems.
Ready-made gradient libraries.
Skip the blank canvas. Each library ships ten presets with copy-ready CSS, anchor hex codes, and the surface each gradient was tuned for.
Greens
green gradient
Sage, forest, emerald, mint, and lime presets with copy-ready CSS.
Open library →
Purples
purple gradient
Lavender, violet, plum, indigo, and orchid CSS presets.
Open library →
Blues
blue gradient background
Navy, sky, cobalt, teal, and royal blue backgrounds with copy-ready CSS.
Open library →
Pinks
pink gradient
Blush, magenta, rose, coral, and bubblegum CSS presets.
Open library →
Black & charcoal
gradient black css
Hero overlays, image scrims, dark mode cards, plus black-to-transparent recipes.
Open library →
Tone mapping
gradient map
Teal & orange, sepia, faded film, duotone, and other photo-grading recipes.
Open library →
Frequently asked questions.
- Can I create linear, radial, and conic gradients?
- Yes. The generator supports linear, radial, and conic CSS gradients with editable color stops.
- Can I copy the generated CSS?
- Yes. After adjusting the gradient, copy the final CSS background value for use in your stylesheet.
- How many color stops can I use?
- You can add multiple stops and place them along the gradient track for precise transitions.
How to create a CSS gradient.
Step 1
Choose the gradient type
Select linear, radial, or conic based on the effect you need.
Step 2
Edit colors and positions
Add color stops, drag their positions, and adjust the angle when available.
Step 3
Copy the CSS
Use the generated CSS background value in your project.