What is a CSS gradient?
A CSS gradient is a function that generates a smooth transition between two or more colors, rendered directly by the browser without an image file. Linear gradients transition along a straight line at any angle; radial gradients transition outward from a center point. They can be used as background images, borders, or overlays. The syntax — linear-gradient(90deg, #6366f1 0%, #ec4899 100%) — specifies the direction, then each color stop with its position. This tool lets you design gradients visually and copies the production-ready CSS.
How to use this tool
- 1 Choose Linear or Radial using the type tabs.
- 2 For linear gradients, set the angle in degrees (0° = top-to-bottom, 90° = left-to-right).
- 3 Drag the sliders to reposition color stops, or change colors using the color pickers.
- 4 Click "+ Add stop" to insert additional color stops for multicolor gradients.
- 5 Copy the CSS from the output panel and paste it into your stylesheet.
Frequently asked questions
What is the difference between linear and radial gradients?
A linear gradient transitions along a straight line — you control the angle. A radial gradient starts from a center point and expands outward in an ellipse or circle. Both accept the same color stop syntax.
Why is the output prefixed with -webkit-?
Older Safari versions (pre-2013) required the -webkit- vendor prefix for gradient syntax. Modern browsers don't need it, but including it maximises compatibility with older WebKit-based browsers and some mobile apps.
Can I use more than two color stops?
Yes — click "+ Add stop" to add as many stops as you need. Each stop has its own color picker and position slider.
What does the position percentage mean?
The position is where along the gradient direction the stop is placed. 0% is the start, 100% is the end. A stop at 50% means the color is fully solid at the midpoint.
How do I use the gradient as a CSS background?
Paste the copied CSS value into a background or background-image property in your stylesheet: .element { background: linear-gradient(…); }