CSS gradient generator
Pick up to five colors, drag their positions, choose linear, radial or conic, and copy the CSS. The address updates as you go, so you can bookmark or share a gradient.
background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]
Start from a preset
How CSS gradients work
A linear-gradient blends colors along a line; the angle sets its direction, with 90deg running left to right and 180deg top to bottom. A radial-gradient spreads from the center outwards, and a conic-gradient sweeps around the center like a color wheel. Each color can have a position in percent; two colors at the same position make a hard edge instead of a blend.
Gradients between hues far apart on the color wheel can turn grey or muddy in the middle. Adding a third color between them, or choosing neighbours on the wheel, keeps the blend clean.
Named-color gradients
- A State of Mint to Shallow Water
- Abyssal Waters to Deep Sea Nightmare
- Adrift on the Nile to Perrywinkle
- Aegean Blue to 20000 Leagues Under the Sea
- After the Storm to Forlorn Cruise
- Aggressive Aqua to Azure
- Ahoy! Blue to International Klein Blue
- Air-Kiss to Mayonnaise
- Akai Red to Dropped Brick
- Alarming Slime to Emerald Ice Palace
- Alienated to Pristine Oceanic
- Almond to Honey Do
Questions
How do I make a gradient with a hard line?
Give two colors the same position, for example red 50% and blue 50%. The browser switches from one to the other at that point instead of blending.
Can I use a gradient on text?
Yes: set the gradient as the background, then add background-clip: text and color: transparent to the text element.
Do gradients slow a page down?
No. CSS gradients are drawn by the browser and need no image download.