CSS Gradient Generator

Linear gradients (with any angle), radial gradients (circle or ellipse), and conic gradients. All support unlimited colour stops with drag-to-reposition handles.

Click anywhere on the gradient bar to add a new stop at that position. Select a stop and click the delete icon to remove it. You need at least two stops.

Yes. Switch to the Tailwind tab for class-based output. Linear gradients map to from-*, via-*, to-* utilities. Radial and conic gradients fall back to CSS since Tailwind has no built-in support.

Switch the preview to Text mode to see it live. In your code use background with the gradient, then add background-clip: text and -webkit-background-clip: text, and set color: transparent.

CSS gradients cannot be animated with transition directly, but you can animate background-position on a gradient that is larger than its container to create a moving effect. Another approach is to cross-fade two overlapping gradient elements using opacity in a @keyframes animation.

Conic gradient has good support in modern browsers but was not supported in older Firefox versions (before version 83). If you need broader compatibility, linear and radial gradients are the safer choice. The live preview in this tool shows exactly what your output will look like.

Not directly with border-image in every scenario, but there is a reliable workaround: set the gradient as the background of a wrapper element, then layer the inner element with a solid background and a small inset. This creates the illusion of a gradient border and works across all modern browsers.