CSS Gradient Generator

Create linear, radial, and conic gradients with instant CSS output. 50+ presets, multiple color stops, ready-to-use code.

CSS Code

Gradient Type

Linear

Radial

Conic

Angle

Shape

Color Stops

Quick Presets

Show all

What Is a CSS Gradient

A CSS gradient is a smooth transition between two or more colors. Unlike solid colors, gradients create visual depth and can make your designs more engaging. CSS supports three types of gradients:

Linear gradients — Colors transition along a straight line. You control the angle (0-360 degrees) to create horizontal, vertical, or diagonal gradients.
Radial gradients — Colors emanate from a center point outward in a circular or elliptical pattern.
Conic gradients — Colors rotate around a center point like a color wheel or pie chart.

How to Use This CSS Gradient Generator

Select gradient type — Choose linear, radial, or conic
Adjust direction — Set angle for linear/conic or shape for radial
Add colors — Click to add color stops, click × to remove
Position stops — Drag or enter percentage values
Copy CSS — Click copy button to get ready-to-use code

Use the preset gallery for quick inspiration. Click any preset to apply it instantly.

CSS Gradient Examples

Here are common use cases for CSS gradients:

Hero Background

Use a gradient as a full-page hero background:

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

Button Gradient

Create attractive gradient buttons:

.btn {
  background: linear-gradient(90deg, #ff512f 0%, #f09819 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
}

Card Background

Add subtle gradients to cards:

.card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 24px;
}

Text Gradient

Apply gradients to text using background-clip:

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

CSS Gradient vs Image Backgrounds

CSS gradients offer several advantages over image backgrounds:

Smaller file size — No image to download, gradients are generated by the browser
Scalable — Gradients look sharp at any resolution
Customizable — Easy to adjust colors and angles
Performant — Browser-rendered gradients are faster than loading images
Accessible — Can be combined with solid fallback colors

Browser Support

CSS gradients have excellent browser support. All modern browsers support linear, radial, and conic gradients without prefixes. For older browsers, you may need vendor prefixes:

/* Modern syntax */
background: linear-gradient(90deg, #667eea, #764ba2);

/* Fallback for older browsers */
background: -webkit-linear-gradient(left, #667eea, #764ba2);
background: -moz-linear-gradient(left, #667eea, #764ba2);
background: linear-gradient(to right, #667eea, #764ba2);

Frequently Asked Questions

What's the difference between linear, radial, and conic gradients? ▼

Linear gradients transition along a straight line (you set the angle). Radial gradients emanate from a center point outward. Conic gradients rotate around a center point like a color wheel or pie chart.

How many color stops can I use? ▼

You can add as many color stops as you need. Most gradients use 2-4 colors, but complex designs may use more. Each stop can be positioned precisely along the gradient.

Can I use CSS gradients with Tailwind CSS? ▼

Yes! Tailwind CSS provides gradient utilities like bg-gradient-to-r, from-{color}, and to-{color}. For custom gradients, you can use arbitrary values: bg-gradient-to-r from-[#667eea] to-[#764ba2].

How do I make a gradient transparent? ▼

Use rgba() or hex with alpha channel for transparent colors. Example: linear-gradient(90deg, rgba(102,126,234,0.5), #764ba2) or linear-gradient(90deg, #667eea80, #764ba2).

Are CSS gradients supported everywhere? ▼

CSS gradients have excellent browser support in modern browsers. They work in all major browsers including Chrome, Firefox, Safari, and Edge. Conic gradients have slightly less support but work in all modern browsers.