How do I create a diagonal gradient in CSS?

Use linear-gradient with an angle or corner keyword. Examples: linear-gradient(45deg, blue, red) creates a 45-degree diagonal, and linear-gradient(to top right, blue, red) creates a gradient from bottom-left to top-right. Angles are measured clockwise from the top (0deg = top, 90deg = right, 180deg = bottom, 270deg = left).

What are color stops in CSS gradients?

Color stops define the colors and their positions in a gradient. Each color stop consists of a color and an optional position (percentage or length). For example, linear-gradient(red 0%, yellow 50%, green 100%) creates a gradient where red starts at 0%, transitions to yellow at 50%, and ends with green at 100%. Multiple colors can share the same position to create hard color transitions.

Are CSS gradients better for performance than images?

Yes, CSS gradients are generally more performant than gradient images. They require no HTTP requests, scale perfectly to any size without quality loss, and consume less memory than image files. However, very complex gradients with many color stops can impact paint performance on lower-end devices. For simple to moderate gradients, CSS is almost always the better choice.

Can I use multiple gradients on one element?

Yes, you can layer multiple gradients using comma-separated values in the background-image property. Each gradient is a separate layer, with the first gradient on top. For example: background-image: linear-gradient(red, transparent), radial-gradient(blue, green); This technique enables complex patterns, textures, and visual effects.

CSS Gradient Generator Guide

Q: What are CSS gradients?

CSS gradients are smooth transitions between two or more colors created using pure CSS. They are treated as images and can be used anywhere an image URL is accepted, including backgrounds, borders, and masks. CSS supports three gradient types: linear (straight-line transitions), radial (circular transitions from a center point), and conic (rotational transitions around a center point).

Q: What is the difference between linear-gradient and radial-gradient?

Linear gradients transition colors along a straight line (top to bottom, left to right, or at any angle). Radial gradients transition colors outward from a center point in a circular or elliptical pattern. Linear gradients are defined by a direction or angle, while radial gradients are defined by a shape (circle or ellipse) and position.

1. What Are CSS Gradients?

CSS gradients are smooth color transitions created entirely with CSS, eliminating the need for image files. They are technically CSS images and can be used anywhere an image URL is accepted -- backgrounds, borders, list bullets, and more.

Gradients offer several advantages over traditional image-based gradients:

No HTTP requests: Gradients are generated by the browser, saving bandwidth and improving load times
Perfect scalability: They look crisp at any resolution or screen size
Easy to modify: Change colors or direction with CSS alone, no image editing required
Smaller file sizes: A few lines of CSS replace potentially large image files
Animation-ready: CSS gradients can be animated or transitioned

The Three Gradient Types

CSS provides three gradient functions:

Type	Description	Use Cases
linear-gradient()	Transitions along a straight line	Headers, buttons, backgrounds
radial-gradient()	Transitions from a center point	Spotlight effects, vignettes
conic-gradient()	Rotational transitions around center	Pie charts, color wheels, spinners

2. Linear Gradients

Linear gradients transition colors along a straight line. They are the most commonly used gradient type and are perfect for backgrounds, overlays, and decorative elements.

Basic Syntax

.element {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

Simple Top-to-Bottom Gradient

The default direction is top to bottom:

.header {
  background: linear-gradient(#326CE5, #1a4d99);
}

/* Equivalent to: */
background: linear-gradient(to bottom, #326CE5, #1a4d99);

Direction Keywords

Use keywords to specify the gradient direction:

/* Vertical */
background: linear-gradient(to top, blue, red);
background: linear-gradient(to bottom, blue, red);

/* Horizontal */
background: linear-gradient(to left, blue, red);
background: linear-gradient(to right, blue, red);

/* Diagonal */
background: linear-gradient(to top right, blue, red);
background: linear-gradient(to bottom left, blue, red);

Angle-Based Gradients

For precise control, specify an angle in degrees. 0deg points to the top, and angles increase clockwise:

/* 0deg = to top */
background: linear-gradient(0deg, blue, red);

/* 90deg = to right */
background: linear-gradient(90deg, blue, red);

/* 180deg = to bottom */
background: linear-gradient(180deg, blue, red);

/* 45deg = diagonal from bottom-left to top-right */
background: linear-gradient(45deg, blue, red);

Multiple Color Stops

Add more colors for complex transitions:

.rainbow {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Practical Examples

/* Modern gradient header */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4rem 2rem;
}

/* Subtle background texture */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}

/* Gradient overlay on images */
.image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Animated gradient button */
.button {
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.05);
}

3. Radial Gradients

Radial gradients transition colors outward from a center point in a circular or elliptical pattern. They are perfect for creating spotlight effects, vignettes, and decorative elements.

Basic Syntax

.element {
  background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}

Simple Radial Gradient

The default is an ellipse centered in the element:

.circle {
  background: radial-gradient(#326CE5, #1a4d99);
}

Shape: Circle vs Ellipse

/* Circle - equal radius in all directions */
background: radial-gradient(circle, blue, red);

/* Ellipse - stretches to fill container (default) */
background: radial-gradient(ellipse, blue, red);

Size Keywords

Control the gradient size with keywords:

/* closest-side: gradient extends to the nearest edge */
background: radial-gradient(circle closest-side, blue, red);

/* farthest-side: extends to the farthest edge */
background: radial-gradient(circle farthest-side, blue, red);

/* closest-corner: extends to the nearest corner */
background: radial-gradient(circle closest-corner, blue, red);

/* farthest-corner: extends to farthest corner (default) */
background: radial-gradient(circle farthest-corner, blue, red);

Positioning the Center

/* Center position (default) */
background: radial-gradient(circle at center, blue, red);

/* Top-left corner */
background: radial-gradient(circle at top left, blue, red);

/* Specific coordinates */
background: radial-gradient(circle at 30% 40%, blue, red);

/* Pixel-based position */
background: radial-gradient(circle at 100px 50px, blue, red);

Practical Examples

/* Spotlight effect */
.spotlight {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}

/* Vignette overlay */
.vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Glowing button */
.glow-button {
  background: radial-gradient(
    circle at center,
    #667eea 0%,
    #764ba2 100%
  );
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

/* Sun/star burst */
.burst {
  background: radial-gradient(
    circle at center,
    #fff700 0%,
    #ff8800 30%,
    #ff0080 60%,
    #7928ca 100%
  );
}

4. Conic Gradients

Conic gradients rotate colors around a center point, like a color wheel or pie chart. They are perfect for circular progress indicators, pie charts, and decorative patterns.

Basic Syntax

.element {
  background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);
}

Simple Conic Gradient

/* Default: starts at top (0deg), centered */
.conic {
  background: conic-gradient(red, yellow, green, blue, red);
}

Controlling the Starting Angle

/* Start from top (0deg) */
background: conic-gradient(from 0deg, red, blue);

/* Start from right (90deg) */
background: conic-gradient(from 90deg, red, blue);

/* Start from bottom (180deg) */
background: conic-gradient(from 180deg, red, blue);

Positioning the Center

/* Centered (default) */
background: conic-gradient(from 0deg at center, red, blue);

/* Off-center */
background: conic-gradient(from 0deg at 25% 25%, red, blue);

/* Specific position */
background: conic-gradient(from 0deg at 100px 100px, red, blue);

Practical Examples

/* Color wheel */
.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red, yellow, lime, cyan, blue, magenta, red
  );
}

/* Pie chart (25% blue, 75% gray) */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #326CE5 0% 25%,
    #e0e0e0 25% 100%
  );
}

/* Loading spinner */
.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    #326CE5 100%
  );
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Checkerboard pattern */
.checkerboard {
  background: conic-gradient(
    from 45deg,
    black 0deg 90deg,
    white 90deg 180deg,
    black 180deg 270deg,
    white 270deg 360deg
  );
  background-size: 40px 40px;
}

5. Color Stops and Positions

Color stops define where each color appears in the gradient. Understanding color stops is essential for creating precise, professional gradients.

Explicit Color Stop Positions

/* Percentages */
background: linear-gradient(
  to right,
  red 0%,
  yellow 50%,
  green 100%
);

/* Pixel values */
background: linear-gradient(
  to right,
  red 0px,
  yellow 200px,
  green 400px
);

/* Mixed units */
background: linear-gradient(
  to right,
  red 0%,
  yellow 10rem,
  green 100%
);

Hard Color Transitions

Create sharp color transitions by placing two colors at the same position:

/* Stripes */
background: linear-gradient(
  to right,
  red 0% 33.33%,
  white 33.33% 66.66%,
  blue 66.66% 100%
);

/* Two-tone split */
background: linear-gradient(
  to right,
  #326CE5 0% 50%,
  #f5576c 50% 100%
);

Color Hints (Transition Midpoints)

Color hints control the midpoint of the transition between two colors:

/* Without color hint - transition midpoint at 50% */
background: linear-gradient(to right, red, blue);

/* With color hint - transition midpoint at 25% */
background: linear-gradient(to right, red, 25%, blue);

/* Multiple color hints */
background: linear-gradient(
  to right,
  red, 20%, yellow, 80%, green
);

Transparent Color Stops

Use transparent or rgba() colors for fade effects:

/* Fade to transparent */
background: linear-gradient(
  to bottom,
  rgba(50, 108, 229, 1) 0%,
  rgba(50, 108, 229, 0) 100%
);

/* Transparent in the middle */
background: linear-gradient(
  to right,
  red 0%,
  transparent 50%,
  blue 100%
);

6. Repeating Gradients

Repeating gradients tile the gradient pattern, creating stripes, patterns, and textures.

repeating-linear-gradient()

/* Diagonal stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #326CE5,
    #326CE5 10px,
    #1a4d99 10px,
    #1a4d99 20px
  );
}

/* Horizontal lines */
.lines {
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 11px
  );
}

/* Barber pole */
.barber-pole {
  background: repeating-linear-gradient(
    45deg,
    red 0px,
    red 20px,
    white 20px,
    white 40px,
    blue 40px,
    blue 60px
  );
  animation: slide 1s linear infinite;
}

@keyframes slide {
  to { background-position: 60px 0; }
}

repeating-radial-gradient()

/* Concentric circles */
.target {
  background: repeating-radial-gradient(
    circle at center,
    red 0px,
    red 20px,
    white 20px,
    white 40px
  );
}

/* Radar effect */
.radar {
  background: repeating-radial-gradient(
    circle at center,
    rgba(50, 108, 229, 0.2) 0px,
    rgba(50, 108, 229, 0.2) 10px,
    transparent 10px,
    transparent 20px
  );
}

repeating-conic-gradient()

/* Radial stripes */
.radial-stripes {
  background: repeating-conic-gradient(
    from 0deg at center,
    #326CE5 0deg 10deg,
    #1a4d99 10deg 20deg
  );
}

7. Gradient Patterns and Effects

Combine multiple gradients and use creative color stops to create patterns, textures, and visual effects.

Layering Multiple Gradients

/* Grid pattern */
.grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 49px, #e0e0e0 49px, #e0e0e0 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, #e0e0e0 49px, #e0e0e0 50px);
  background-size: 50px 50px;
}

/* Polka dots */
.polka-dots {
  background-image:
    radial-gradient(circle, #326CE5 25%, transparent 25%),
    radial-gradient(circle, #326CE5 25%, transparent 25%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
}

/* Chevron pattern */
.chevron {
  background:
    linear-gradient(135deg, #326CE5 25%, transparent 25%),
    linear-gradient(225deg, #326CE5 25%, transparent 25%),
    linear-gradient(45deg, #326CE5 25%, transparent 25%),
    linear-gradient(315deg, #326CE5 25%, #1a4d99 25%);
  background-size: 50px 50px;
  background-position: 0 0, 0 0, 25px 25px, 25px 25px;
}

Text Gradients

.gradient-text {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
  font-weight: bold;
}

Border Gradients

.gradient-border {
  border: 5px solid;
  border-image: linear-gradient(45deg, #667eea, #764ba2) 1;
}

/* Alternative technique with pseudo-element */
.gradient-border-alt {
  position: relative;
  background: white;
  padding: 2rem;
}

.gradient-border-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 3px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

8. Browser Compatibility

CSS gradients have excellent browser support, but understanding compatibility helps ensure your designs work everywhere.

Current Support

Gradient Type	Browser Support	Prefix Required
linear-gradient()	All modern browsers	No (since 2013)
radial-gradient()	All modern browsers	No (since 2013)
conic-gradient()	Chrome 69+, Firefox 83+, Safari 12.1+	No
repeating-*-gradient()	All modern browsers	No

Fallbacks for Older Browsers

.element {
  /* Fallback solid color for very old browsers */
  background-color: #326CE5;

  /* Modern gradient */
  background: linear-gradient(to right, #326CE5, #764ba2);
}

Feature Detection

/* Use @supports for conic gradients */
.element {
  background: linear-gradient(to right, blue, red);
}

@supports (background: conic-gradient(red, blue)) {
  .element {
    background: conic-gradient(red, blue);
  }
}

9. Best Practices

Follow these guidelines to create performant, maintainable gradients.

Use CSS Variables for Gradient Colors

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-start: #667eea;
  --color-end: #764ba2;
}

.element {
  background: var(--primary-gradient);
}

/* Or build gradients from color variables */
.element {
  background: linear-gradient(135deg, var(--color-start), var(--color-end));
}

Optimize Color Stop Count

While CSS can handle many color stops, keeping them minimal improves performance:

/* Good: 3-5 color stops */
background: linear-gradient(to right, red, yellow, green);

/* Avoid: excessive color stops */
background: linear-gradient(
  to right,
  red 0%, red 5%, orange 10%, orange 15%, /* ...20+ more stops... */
);

Consider Accessibility

Ensure sufficient contrast between gradient colors and overlaid text:

/* Poor contrast */
.bad {
  background: linear-gradient(to right, #fff, #eee);
  color: #ddd; /* Hard to read */
}

/* Good contrast */
.good {
  background: linear-gradient(to right, #326CE5, #1a4d99);
  color: #ffffff; /* Clear contrast */
}

Test Gradient Performance

Complex gradients can impact paint performance on lower-end devices. Test on target devices and consider simplifying if needed.

Provide Fallbacks

Always specify a solid background color before gradients for browsers that don't support them.

10. Using Our CSS Gradient Generator

Our free CSS Gradient Generator lets you create beautiful gradients visually and export production-ready CSS code.

Visual Gradient Builder

Design gradients with an intuitive visual interface. Choose gradient type (linear, radial, or conic), adjust direction or angle, add color stops, and see changes in real-time.

Color Stop Editor

Add, remove, and reposition color stops with a visual editor. Click to add new colors, drag to adjust positions, and use the color picker for precise color selection.

Preset Library

Browse curated gradient presets for quick inspiration. Categories include:

Modern UI gradients
Vibrant color combinations
Subtle backgrounds
Gradient patterns
Retro color schemes

Export Options

CSS code: Copy ready-to-use CSS with vendor prefixes
CSS variables: Export as CSS custom properties
Sass/SCSS variables: Export for preprocessors
Image export: Download gradient as PNG for use in design tools

Key Features

100% client-side: Your gradients never leave your browser
Live preview: See gradient changes in real-time
Angle control: Precise degree input or visual rotation
Color format options: HEX, RGB, HSL, or named colors
Responsive preview: See how gradients look at different sizes
Code syntax highlighting: Easy-to-read CSS output

Create Beautiful CSS Gradients

Design stunning gradients with our visual gradient generator. Choose from presets, customize colors and positions, and export production-ready CSS code -- all in your browser.

Try the CSS Gradient Generator

CSS Gradient Generator: Complete Guide to CSS Gradients (2026)

1. What Are CSS Gradients?

The Three Gradient Types

2. Linear Gradients

Basic Syntax

Simple Top-to-Bottom Gradient

Direction Keywords

Angle-Based Gradients

Multiple Color Stops

Practical Examples

3. Radial Gradients

Basic Syntax

Simple Radial Gradient

Shape: Circle vs Ellipse

Size Keywords

Positioning the Center

Practical Examples

4. Conic Gradients

Basic Syntax

Simple Conic Gradient

Controlling the Starting Angle

Positioning the Center

Practical Examples

5. Color Stops and Positions

Explicit Color Stop Positions

Hard Color Transitions

Color Hints (Transition Midpoints)

Transparent Color Stops

6. Repeating Gradients

repeating-linear-gradient()

repeating-radial-gradient()

repeating-conic-gradient()

7. Gradient Patterns and Effects

Layering Multiple Gradients

Text Gradients

Border Gradients

8. Browser Compatibility

Current Support

Fallbacks for Older Browsers

Feature Detection

9. Best Practices

Use CSS Variables for Gradient Colors

Optimize Color Stop Count

Consider Accessibility

Test Gradient Performance

Provide Fallbacks

10. Using Our CSS Gradient Generator

Visual Gradient Builder

Color Stop Editor

Preset Library

Export Options

Key Features

Create Beautiful CSS Gradients

Related Articles

CSS Box Shadow Generator: Complete Guide to Box Shadows

CSS Minifier Guide: Minify & Beautify CSS Online

Color Converter Guide: Convert Between Color Formats