CSS Gradient Generator

Writing a gradient is rarely about picking colors. The time goes into figuring out which way 45deg points, whether transparency should be rgba or 8-digit HEX, and why repeating appears to do nothing. This tool exposes every parameter on a slider and keeps the CSS ready to copy:

• Three types: linear-gradient, radial-gradient and conic-gradient. Switching type leaves only the relevant controls, so shape options never appear for a linear gradient
• Angle and center: a 0 to 360 degree slider with a number field and eight direction buttons. Radial and conic gradients also allow dragging the X and Y center, or snapping it with a nine-cell grid
• Any number of stops: each stop has its own color, alpha and position. Insert a middle color in the widest gap, distribute stops evenly, mirror the whole set, or fade the last color to fully transparent
• Flexible color input: 3, 6 and 8-digit HEX, rgb(), rgba(), hsl(), hsla() and names such as orange or transparent are all recognized and normalized to HEX
• Six output styles: background-image, the background shorthand, multi-line indented CSS, inline style, a Tailwind arbitrary value and a CSS custom property. Colors can be written as HEX, rgb() or hsl()
• Fallback color: when enabled, background-color is written before background-image, so browsers without conic-gradient support do not show an empty block
• Checkerboard preview: transparency is visible at a glance, sample text can be overlaid, and contrast is computed per stop with a WCAG 2.1 verdict
• Twelve presets and random palettes: sunset, ocean, neon and other common gradients load with one click, including repeating diagonal stripes and a conic rainbow ring that are awkward to hand-write
• Fully local: no API calls and no uploads. Every change recomputes the preview and the code instantly

When to use it

• Choose a background for a button, card or banner and confirm that white text stays readable
• Produce a bg-[...] arbitrary value for Tailwind without replacing spaces with underscores by hand
• Build a fade to transparent, which needs the correct 8-digit HEX or rgba form
• Recreate a design note such as a 45 degree orange gradient as CSS that can be pasted directly
• Understand why conic-gradient has no repeating variant and why stop percentages are not distances

The three types use different coordinates

This is the most common conic trap: copying a linear 50% over changes the meaning from halfway along a distance to halfway around an angle.

Angles, midpoints and alpha

• Angles are normalized: entering 400 yields linear-gradient(40deg, ...) and -45 yields linear-gradient(315deg, ...), matching browser rendering with shorter code
• Midpoints average the ends: black to white at 50% is #808080, so inserting a stop in the widest gap produces the average of that span
• Alpha as 8-digit HEX: 0.5 maps to 80, 0.25 to 40 and full transparency to 00, for example #39ff1400. The same gradient in rgb notation gives rgba(57,255,20,0)
• hsl conversion rounds: #ff512f becomes hsl(10,100%,59%). Hue and lightness are integers, so round trips can shift by one level; keep HEX if that matters

Can text be read on the gradient

The preview computes contrast at every stop and reports the worst one. Stops with alpha below 1 are first blended with your assumed backdrop, then relative luminance is calculated:

Large text means 24px or larger, or 18.66px bold. Readability problems often occur in one short section, so the tool lists every stop instead of a single average.

FAQ

• Repeating is on but nothing repeats? Repetition only happens when stops do not fill 0% to 100%. The diagonal stripe preset ends at 24%, so it repeats every 24%; drag the last stop to 100% and it becomes a normal gradient
• Why is there no repeating conic gradient? The spec defines repeating-conic-gradient(), but no browser implements it, so the tool hides the switch in conic mode rather than emit invalid CSS
• Do I need the -webkit- prefix? No. linear-gradient and radial-gradient work unprefixed in Chrome 26+, Firefox 16+, Safari 6.1+ and Edge 12+, while conic-gradient needs Chrome 69+, Edge 17+, Safari 12.1+ and Firefox 83+
• Why can the fallback not be combined with the background shorthand? background: resets background-color to transparent, which defeats the fallback. Selecting the shorthand unchecks it and shows a hint; use it with background-image instead
• Can it export an image? A gradient is a vector background and needs no image file, and it stays sharp at any scale. An image is only needed for email templates or article editors that accept bitmaps only
• What about a muddy band between two colors? CSS interpolates in sRGB by default, so red to green passes through dull yellow. Split the gradient into three stops with a brighter midpoint, or use linear-gradient(in oklab, ...) in modern browsers; the tool outputs the most compatible classic syntax
• How do I get a Tailwind class? Choose the Tailwind arbitrary value output; spaces become underscores, for example bg-[linear-gradient(135deg,#ff512f_0%,#dd2476_100%)]
• What can the color field accept? #abc, #aabbcc, #aabbccdd, rgb(57, 255, 20), hsl(111, 100%, 54%) and names such as orange. Unrecognized input keeps the last valid color and shows a hint. A single color belongs in background-color, so the tool keeps at least two stops

To convert a color between formats, use the color converter; to tidy the stylesheet after pasting, use the CSS formatter; to inspect a gradient exported as vector art, use the SVG preview. All editing and calculation happen locally, and palettes are never uploaded.