Linear to right2 stops
Custom gradient
Create linear, radial and conic gradients. Start from a preset or a random one, then copy the CSS in HEX, RGB or HSL, or save it as PNG, SVG or JSON.
Type
Direction
Color stopsMin 2
- 0%
- 100%
Click a preset to load itStep 1 of 1
Export code
Linear to right, 2 stops.
Color values
gradient.css
background: linear-gradient(to right, #B95ED9 0%, #4ECDC4 100%);Other formats
The same gradient in the other color values, and as files.
RGB format
background: linear-gradient(to right, rgb(185, 94, 217) 0%, rgb(78, 205, 196) 100%);HSL format
background: linear-gradient(to right, hsl(284, 62%, 61%) 0%, hsl(176, 56%, 55%) 100%);Download
Import
Load a JSON file saved with the JSON button.
How it works
Build CSS gradients with as many stops as you need and copy production ready code.
Avoiding the grey dead zone
A two stop gradient between complementary colors passes through grey in the middle, because CSS interpolates in sRGB by default and the midpoint of opposing hues is desaturated. Fix it by adding a middle stop with a hue between the two, or by choosing endpoints closer together on the wheel.
Angles and direction
In CSS, 0deg points up and angles increase clockwise, so 90deg runs left to right. That differs from the maths convention, which is the usual source of gradients coming out mirrored.
Frequently asked
3 questions people ask about the gradient generator.
1Why does my CSS gradient look muddy in the middle?
sRGB interpolation passes through a desaturated midpoint when the two endpoint hues are far apart on the wheel. Add an intermediate color stop, or pick endpoints within about 90 degrees of each other.
2What angle does 0deg mean in a CSS gradient?
0deg points to the top of the element and angles increase clockwise. So 90deg goes left to right, 180deg goes top to bottom.
3How do I make a gradient fade to transparent?
End on the same color with zero alpha rather than on transparent. In sRGB, the transparent keyword is transparent black, so fading to it darkens the gradient as it fades. Use rgba with your own color and an alpha of 0 instead.