CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
CSS Gradient Generator: the tool
Gradient
Avoids the dull middle some color pairs get. Browsers that do not know it show the standard blend.
Color stops (2 of 8)
Preview and CSS
Start from a preset
Choose the type of gradient, add the colors, move them along the line and copy the CSS, ready to paste into a stylesheet. The preview is drawn by your browser from the very same CSS you copy, so what you see is what you get. Presets give you a quick start, and a PNG download gives you the same gradient as an image.
How it works
A gradient is a smooth change from one color to the next along a line. A linear gradient runs in a straight line at an angle, where 0 degrees points up and 90 degrees points right. A radial gradient spreads out from the center as a circle or an ellipse. A conic gradient sweeps around the center like the hand of a clock, starting at the angle you set.
Each color stop is a color and a position from 0% to 100% along the line. Stops are written in order of position, whatever order you add them in. Two stops at the same position make a hard edge with no blending, which is how stripes and sharp pie charts are made.
By default a browser blends colors in sRGB, straight between their red, green and blue values. Some pairs, such as blue and yellow, pass through a dull grey in the middle. The smoother blend asks the browser to blend in OKLab instead, a color space built so that steps look even, and writes that line of CSS after the standard one. A browser that does not know it ignores the extra line and keeps the first, so the gradient always shows.
The PNG is drawn on a canvas at 1600 by 900 pixels with the same geometry as CSS: the gradient line of a linear gradient reaches the corners of the box, and a radial gradient reaches the farthest corner. For the smoother blend, the span between two stops is cut into small steps that are blended in OKLab, so the image matches what a supporting browser shows.
How to use it
- Choose Linear, Radial or Conic, and set the angle or, for a radial gradient, its shape.
- Change the color and the position of each stop, or press Add a stop to put a new one in the widest gap.
- Try Space evenly, Reverse or Random gradient, or start from a preset.
- Press Copy CSS to take the code, or Download PNG to take the gradient as an image.
Example
A two-color linear gradient built by the same code as the tool above, with the CSS it writes.
What was set
- Type
- Linear, 90°
- Stop 1
- #FF6347 at 0%
- Stop 2
- #1E90FF at 100%
What came out
- CSS
- linear-gradient(90deg, #FF6347 0%, #1E90FF 100%)
- CSS, smoother
- linear-gradient(in oklab 90deg, #FF6347 0%, #1E90FF 100%)
- Middle, standard
- #8F7AA3
- Middle, smoother
- #AC89AE
- Stop added in the gap
- #8F7AA3
Good to know
- A gradient has from 2 to 8 color stops, each at a position from 0% to 100%.
- Radial and conic gradients are centered. Moving the center, repeating gradients and transparent stops are not offered.
- The smoother blend works in current versions of Chrome, Edge, Safari and Firefox. In an older browser the preview shows the standard blend, and the CSS keeps a line that every browser understands.
- The PNG is always 1600 by 900 pixels. To use another size, copy the CSS and apply it to an element of the size you need.
Questions people ask
What is the difference between linear, radial and conic gradients?
A linear gradient changes along a straight line, a radial one changes with the distance from a center point, and a conic one changes with the angle around a center point. Linear suits backgrounds, radial suits glows and spotlights, and conic suits color wheels and charts.
How do I make a hard edge or stripes?
Give two stops the same position. The color changes abruptly there, with no blend. Red at 0% and 50% followed by blue at 50% and 100% makes two halves, and more pairs of stops at shared positions make as many stripes.
What is OKLab blending, and should I use it?
It blends colors in a space built so that equal steps look equal, which avoids the grey middle some pairs get in sRGB. Try it when a gradient between two bright colors looks muddy in the middle, and leave it off when you want the classic look.
Will the CSS work in every browser?
The standard gradient works in every current browser. The copy includes a plain color first, for software that draws no gradient, and the smoother blend comes last, so an older browser simply uses the line before it.