Free CSS Gradient Generator

Use a gradient function as a background, for example background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Here you pick the type, angle and stops, and the tool writes that line for you to copy into your stylesheet.

90deg runs left to right. 0deg runs bottom to top, 180deg top to bottom and 270deg right to left. The default here is 135deg, from top left to bottom right. You can type any number, including negative values.

Type a transparent color into a stop's text box, such as rgba(255,255,255,0) to fade to clear white or rgba(0,0,0,0) for clear black. The code keeps it as typed. The color picker can't show transparency and shows black instead.

Linear blends colors along a straight line at an angle. Radial spreads them out from a center point. Conic sweeps them around a center like a clock hand, which suits pie charts and color wheels. This tool draws radial gradients as a centered circle.

Not in the tool yet, since radial output is always radial-gradient(circle, ...) from the center. After copying, edit the code: change circle to ellipse, or write circle at 30% 20% to move the center. The stops stay the same.

No. Every current browser supports linear and radial gradients without a prefix, and conic gradients work in Chrome 69, Safari 12.1, Firefox 83 and later. This tool never adds prefixes, so the copied line is the standard syntax only.

Put two stops at the same position. For example, #000000 at 50% and #ffffff at 50% gives a sharp line instead of a blend. Add more pairs to make stripes. The code sorts stops by position, and stops at the same spot keep the order you added them.

There's no limit. Add stop places a new stop halfway between the first stop and the one added last, so drag each new stop to where you want it. You can remove stops until two are left.

The tool outputs plain CSS, not Tailwind classes. Paste the gradient into an arbitrary value with underscores for spaces, such as bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], or add it to your theme as a background image.

This tool makes background gradients, but you can reuse the code for text. Put the copied background line on the text element, then add background-clip: text, -webkit-background-clip: text and color: transparent so the gradient shows through the letters.

Yes. It's free with no account or usage limit. Your colors and settings stay in your browser and aren't saved, so a reload starts over. On the live site, Google Analytics counts Copy CSS clicks, never the gradient itself.