CSS Gradient Generator
Create beautiful gradients for your designs
Presets
About Gradient Generator
Build a CSS gradient visually and copy the rule straight into your stylesheet. Adjust colours, stops and angle, see the result immediately, and take the generated linear-gradient or radial-gradient value with you.
How a gradient is described
A CSS gradient needs a direction and at least two colour stops. For a linear gradient the angle comes first — 0deg paints bottom to top and 90deg left to right — followed by each colour and, optionally, the position where it lands. A radial gradient replaces the angle with a shape, spreading outward from a centre point instead of along a line.
background: linear-gradient(90deg, #6c5ce7 0%, #00b894 100%); runs from purple at the left edge to green at the right.Why does my gradient look banded?
Visible stripes appear when a wide area is filled with a small colour range: the display has too few intermediate steps to render a smooth blend, especially in 8-bit colour. Widening the difference between the stops, adding an intermediate stop, or overlaying a very subtle noise texture all reduce it.
Do I still need vendor prefixes?
No. Unprefixed linear-gradient and radial-gradient have been supported by every current browser for years. Prefixed variants like -webkit-linear-gradient are only relevant if you must support browsers well over a decade old, and carrying them otherwise just adds weight to your stylesheet.
Try our other free tools: box shadow generator, color converter, and image color picker.