CSS Gradient Generator
Pick two colors, choose a linear or radial gradient, and adjust the angle to see a live preview. The matching CSS is generated instantly and ready to copy straight into your stylesheet.
background: linear-gradient(90deg, #ff9a00, #60acfc);How it works
Choose your two colors with the pickers, pick "linear" or "radial", and for linear gradients drag the angle slider. The preview and the CSS code below update instantly as you adjust anything.
Tip
An angle of 90deg goes left to right, 180deg goes top to bottom, and 0deg goes bottom to top — experiment with the slider to see how the direction of the gradient changes.
What's the difference between linear and radial?
A linear gradient transitions along a straight line at the angle you set. A radial gradient transitions outward from the center in a circle, regardless of angle.
More tools in this category
Exposure Calculator
Find equivalent camera exposures across aperture, shutter speed, and ISO.
Aspect Ratio Calculator
Scale an image or video proportionally and find its simplified ratio.
Contrast Checker
Check whether a foreground and background color meet WCAG contrast guidelines.
Color Palette Generator
Turn any base color into complementary, analogous, and triadic color palettes.
Color Format Converter
Convert any color between HEX, RGB, HSL, and CMYK instantly, with one-click copy for each format.
Typography Scale Generator
Generate a harmonious set of font sizes from a base size and a scale ratio, ready to copy as CSS custom properties.