CSS gradient generator

How to use

1. Choose Linear, Radial or Conic under "Type", or start from a preset.
2. For linear, set the angle with the slider, the number field or a direction button. For radial, pick the shape and center position. For conic, set the start angle and position.
3. For each color stop, enter a color (picker, HEX, rgb() or hsl()), opacity and position in %. Use "Add stop" for up to 8 stops.
4. Check the preview, then copy the CSS (background or background-image) or the Tailwind CSS class.

Notes and limits

• You can use 2 to 8 color stops. Two positions on one stop and color hints (midpoints) are not supported.
• The output sorts stops by position. Stops at the same position keep their list order.
• Translucent colors are written as 8-digit HEX (#rrggbbaa). Current major browsers support it; very old browsers may not.
• Radial size keywords (such as closest-side), repeating gradients and layered gradients are not available.
• The Tailwind output is an arbitrary value class for v3.0+ and v4. It is not converted to from-, via- and to- utilities.

How it works

Linear output is linear-gradient(angle, color position, ...), radial is radial-gradient(shape at position, ...), and conic is conic-gradient(from angle at position, ...).

Angles are rounded to whole degrees from 0 to 360 and positions to 0-100% with one decimal. In CSS, 0deg points up and angles increase clockwise.

For the Tailwind class, spaces after commas are removed and the remaining spaces become underscores inside bg-[...]. If the value contains underscores, quotes or similar characters, no class is produced.