CSS Gradient Generator
Generate CSS gradients visually. Pick colors, set direction, and copy the CSS — all in real time.
How to use
- Pick two colors using the color pickers and choose a gradient type (linear or radial).
- Adjust the angle with the slider or click a preset direction button.
- Click Copy CSS to copy the generated CSS property to your clipboard.
Frequently asked questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, created entirely with CSS. Gradients can be linear (along a straight line) or radial (from a center point outward), set via the linear-gradient() or radial-gradient() functions.
What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a center point in a circular or elliptical shape.
How do I add a gradient to a div?
Apply the gradient as a background property: background: linear-gradient(135deg, #6366f1, #8b5cf6); — this creates a diagonal gradient from indigo to purple on the element.
Can I use more than 2 colors?
Yes. CSS gradients support any number of color stops. For example: linear-gradient(90deg, red, green, blue) creates a gradient through three colors.