UUID generator
Generate random UUIDs in bulk.
CSS gradient generator
Design a linear, radial or conic gradient and copy the CSS.
Colour stops
0%
100%
Your files stay on your device
How it works
- 1Choose linear, radial or conic.
- 2Set the angle, or the shape for radial.
- 3Pick colours and drag each stop to its position. Add stops with Add colour stop.
- 4Copy the CSS and paste it into your stylesheet.
What the options do
- Linear
- Colours blend along a straight line. The angle sets the direction: 0 degrees goes up, 90 goes right, 180 goes down.
- Radial
- Colours spread out from the centre, as a circle or an ellipse.
- Conic
- Colours sweep around the centre like a colour wheel or pie chart. The angle rotates the start.
- Colour stops
- Each stop is a colour at a position from 0 to 100 percent. Up to eight.
Privacy
Everything runs in your browser. Nothing you type is sent to a server.
Questions people ask
Which browsers support these gradients?
Linear and radial gradients work in every current browser. Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
How do I make a hard edge instead of a blend?
Put two stops at the same position, for example red at 50% and blue at 50%. There is no blend distance between them, so the change is sharp.
Can I use it as a text colour or border?
Yes. Use the same value in background-image, together with background-clip: text for text, or border-image for borders.
Why does the page show a different colour than I picked?
The colour picker uses sRGB hex values. Screens with wide colour ranges can display them slightly differently, but the CSS values are exact.
How do I add transparency?
This tool outputs solid hex colours. Edit the code and change a colour to an eight-digit hex such as #4f46e580, or to rgba().