How to use
- Start from a preset or the default gradient.
- Click the bar to add colours; drag the stops to move them.
- Choose linear, radial or conic and adjust the angle or centre.
- Copy the CSS declaration or the Tailwind class.
Options explained
- Linear
- Colours change along a straight line. 0° goes upwards, 90° to the right and 180° downwards.
- Radial
- Colours spread out from a centre point as a circle or an ellipse that fits the element.
- Conic
- Colours sweep around a centre point like a colour wheel or pie chart.
- Repeat
- Repeats the pattern; set stops within a short range, such as 0% to 10%, to make stripes.
What the generated code looks like
The same two colours, written by each type. Stops are always written with a percentage position:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)The Tailwind version wraps the same value in an arbitrary-value class. Spaces become underscores and the spaces after commas are removed:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]In the last CSS line the pattern repeats every 10% of the element, which gives thin stripes. For conic gradients the angle is where the sweep starts, and for radial gradients the two percentages are the centre.
Frequently asked questions
Which browsers support these gradients?
Linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari, without vendor prefixes.
How do I make a transparent gradient?
Type a colour with an alpha channel, such as #00000000 for fully transparent black, into the colour field of a stop.
How do I use the Tailwind class?
Add it to an element's class list in Tailwind CSS 3 or 4. It uses an arbitrary value, so no configuration is needed.
Privacy
This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.