Micro Tools
Advertisement

Gradient Generator

Build beautiful CSS gradients with a live visual editor. Linear and radial, custom colors and angle, copy-ready code.

Gradient settings

Pick colors and an angle. Preview and CSS update live.

Live preview

CSS

Advertisement

How the generator works

Choose linear or radial, set two or three color stops with positions, and (for linear gradients) an angle in degrees. The preview repaints instantly and the background declaration below is always valid CSS you can paste straight into a stylesheet or style attribute.

Linear vs radial

Linear gradients sweep color along a straight line, great for buttons, hero backgrounds and overlays. Radial gradients bloom outward from a center point, ideal for glows, vignettes and spotlight effects behind headlines.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Gradient Generator FAQs

What does the angle mean in a linear gradient?
It is the direction of the color sweep in degrees: 0deg points up, 90deg points right, 180deg points down. 135deg is the popular diagonal used on many modern buttons.
How do I make a hard color stop instead of a blend?
Set two stops to the same position, for example red 50% and blue 50%. The browser then switches color instantly at that point instead of blending.
Can I add more than three colors?
This tool supports up to three stops to stay simple. In raw CSS you can chain as many color stops as you like using the same syntax shown in the output.
Will the CSS work in all browsers?
Yes. Standard linear-gradient and radial-gradient syntax works in every modern browser without vendor prefixes.
How do I use this as a text gradient?
Apply the gradient to the background, then add background-clip: text with transparent color on the text element. The copied background line is the starting point.
Advertisement