What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, created entirely with CSS — no image files required. Gradients are resolution-independent, lightweight, and easy to modify. They're one of the most versatile design tools for buttons, backgrounds, hero sections, text fills, and decorative elements.
How to Use This Tool
- Choose a gradient type — Linear, Radial, or Conic.
- Adjust the parameters — angle, shape, position, size.
- Add or edit color stops — click the color swatch, type a HEX, or drag the position slider.
- Watch the live preview update in real time.
- Copy the CSS — click any output row, or use the "Copy CSS" button.
Gradient Types Explained
- Linear — Colors transition along a straight line at a specific angle. The most common type. Use angles like
90deg for left-to-right, 180deg for top-to-bottom.
- Radial — Colors radiate outward from a center point. Shape can be a circle or ellipse. Position and size control where and how it spreads.
- Conic — Colors sweep around a center point like a pie chart. Great for color wheels, progress indicators, and decorative pie charts.
Understanding Color Stops
Each color stop has a color and a position (0% to 100%). The browser interpolates smoothly between them. For example:
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)
This creates a horizontal gradient that starts red, transitions to green at the midpoint, then ends blue. You can add as many stops as you like for multi-color gradients.
Angle Reference (Linear)
- 0deg — Bottom to top
- 90deg — Left to right
- 135deg — Diagonal bottom-left to top-right
- 180deg — Top to bottom
- 225deg — Diagonal top-right to bottom-left
- 270deg — Right to left
- 315deg — Diagonal bottom-right to top-left
Radial Gradient Sizes
- Farthest corner — Gradient extends to the farthest corner of the container (default).
- Farthest side — Gradient extends to the farthest side.
- Closest corner — Gradient extends to the closest corner.
- Closest side — Gradient extends to the closest side.
Conic Gradient Use Cases
- Color wheels — smooth hue transitions around a circle
- Progress indicators — visually show a value from 0% to 100%
- Pie charts — sharp stops at specific angles create pie slices
- Decorative backgrounds — repeating color bands radiating from a point
Tailwind Support
The Tailwind output uses arbitrary value syntax — a feature of Tailwind CSS that lets you write custom CSS directly in your class names:
bg-[linear-gradient(135deg,_#3B82F6_0%,_#8B5CF6_100%)]
Note the underscores — Tailwind uses _ in place of spaces inside arbitrary values.
Common Use Cases
- Hero backgrounds — dramatic full-width gradients behind headlines.
- Buttons — subtle linear gradients for depth and polish.
- Text fills — gradient text via
background-clip: text.
- Cards and panels — soft radial gradients for emphasis.
- Progress bars — linear gradients that convey momentum.
- Charts and data viz — conic gradients for gauges and dials.
- Placeholder images — colorful gradients as SVG/photo stand-ins.
Related Tools
Privacy Note
All gradient generation happens in your browser. Nothing is uploaded, stored, or shared.