CSS Gradient Generator

How the Gradient Generator Works

CSS defines three gradient functions, and this tool builds all of them. linear-gradient() paints color transitions along a straight line at a specified angle, where 0deg points to the top of the element and the angle increases clockwise — so 90deg points right and 180deg points down. radial-gradient() instead radiates outward from a center point in a circle or ellipse shape, useful for spotlight or vignette effects. conic-gradient() sweeps colors around a center point like a color wheel or pie chart, which is the only one of the three that can produce a true rainbow-style rotation without multiple overlapping gradients.

Each color stop you add has both a color and a position (0% to 100%) along the gradient's path. The browser interpolates between adjacent stops in the sRGB color space by default, blending each RGB channel linearly. This works well for adjacent hues but can produce a dull, grayish midpoint when blending colors from opposite sides of the color wheel — red to green, for instance — because linear RGB blending doesn't travel around the hue circle, it cuts straight through the middle of the color space. Adding an intermediate stop along the intended hue path is the standard fix.

The generator keeps the CSS output and a Tailwind CSS arbitrary-value class in sync as you edit, so you can paste either directly into a stylesheet or a className without manual translation. If you're building a gradient to sit behind text, it's worth checking the resulting contrast at both gradient endpoints with the Contrast Checker, since a gradient that looks fine on average can still fail WCAG contrast at one end.