🖌️ CSS Gradient Generator — Linear and Radial
Choose gradient type, set colors and direction, then copy the generated CSS for use in any stylesheet.
Input
Result
Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.
How it works
- Select linear or radial gradient.
- Adjust the angle (for linear) and enter two hex colors.
- Click Generate CSS to get the background property ready to paste.
Examples
- linear-gradient(90deg, #4f46e5, #ec4899) creates a left-to-right blend.
- radial-gradient(circle, #4f46e5, #ec4899) centers the first color.
- Use any valid CSS color values including rgb() or named colors.
Frequently asked questions
Does this support more than two colors?
This simple version generates two-stop gradients. For complex multi-stop gradients you can edit the output CSS.
Is the preview accurate?
The generated CSS matches standard browser linear-gradient and radial-gradient syntax.
Can I use it offline?
Yes. Everything runs locally in your browser with no network requests.
Related tools
More Design tools →Color Contrast Checker
Measure WCAG contrast between two hex colors for text and interface graphics.
Aspect Ratio Calculator
Solve width, height and simplified aspect ratios without breaking proportions.
Color Palette Generator
Generate five hex tints and shades from a single base color.
CSS Box Shadow Generator
Generate a CSS box-shadow declaration from offset, blur, spread and color.