Updated March 17, 2026 · 13 min read

CSS Gradient Generator: Complete Guide to Linear & Radial Gradients (2026)

CSS gradients let you create smooth color transitions without image files — they are resolution-independent, lightweight, and infinitely customizable. This guide covers every type of CSS gradient with copy-paste code examples, real-world design patterns, and common pitfalls to avoid.

What Is a CSS Gradient?

A CSS gradient is a special type of <image> generated by the browser that displays a smooth, progressive transition between two or more colors. Unlike image files, gradients are created with pure CSS code, which means they are infinitely scalable, load instantly, and have zero file size overhead.

CSS supports four types of gradients:

• linear-gradient() — transitions along a straight line
• radial-gradient() — transitions outward from a center point
• conic-gradient() — transitions around a center point (like a pie chart)
• repeating-* variants of all three — tile the gradient pattern

Gradients can be used anywhere a CSS <image> is accepted: background-image, border-image, list-style-image, and even mask-image. They are most commonly used as backgrounds.

Linear Gradients: The Fundamentals

The linear-gradient() function creates a color transition along a straight line. It is the most commonly used gradient type.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...colorN);

The simplest gradient uses just two colors with the default direction (top to bottom):

/* Top to bottom (default) */
background: linear-gradient(#667eea, #764ba2);

Controlling Direction

You can specify direction using keywords or degree angles:

/* Left to right */
background: linear-gradient(to right, #f093fb, #f5576c);

/* Diagonal: top-left to bottom-right */
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

/* Bottom to top */
background: linear-gradient(to top, #a8edea, #fed6e3);

/* 0deg = bottom to top, 90deg = left to right */
background: linear-gradient(45deg, #fa709a, #fee140);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(270deg, #f093fb, #f5576c);

Multiple Color Stops

Gradients are not limited to two colors. You can add as many color stops as you want, and control exactly where each color appears:

/* Three colors, evenly distributed */
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);

/* Control exact positions with percentages */
background: linear-gradient(90deg,
    #ff6b6b 0%,
    #ff6b6b 30%,   /* solid red for first 30% */
    #feca57 50%,   /* yellow at 50% */
    #48dbfb 100%
);

/* Hard color stop (no transition) */
background: linear-gradient(90deg,
    #ff6b6b 50%,
    #48dbfb 50%    /* instant switch at 50% */
);

When you place two color stops at the same percentage, you create a hard edge with no transition. This technique is commonly used for striped patterns and progress-bar-style fills.

Radial Gradients

The radial-gradient() function creates a gradient that radiates outward from a center point. By default, it creates an elliptical gradient centered in the element.

Basic Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

/* Simple centered radial gradient */
background: radial-gradient(#667eea, #764ba2);

Circle vs Ellipse

/* Circular gradient */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptical gradient (default) */
background: radial-gradient(ellipse, #667eea, #764ba2);

Controlling Size

The size keyword determines where the gradient's edge falls:

Custom Position

/* Centered at top-left corner */
background: radial-gradient(circle at top left, #667eea, #764ba2);

/* Centered at 20% from left, 80% from top */
background: radial-gradient(circle at 20% 80%, #ff6b6b, transparent);

/* Spotlight effect */
background: radial-gradient(circle at 30% 40%,
    rgba(255, 255, 255, 0.3),
    transparent 60%
);

Conic Gradients

The conic-gradient() function creates a gradient that sweeps around a center point, like the hands of a clock. This is the newest gradient type and is ideal for pie charts, color wheels, and decorative effects.

/* Simple conic gradient (color wheel) */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart effect */
background: conic-gradient(
    #ff6b6b 0deg 120deg,
    #feca57 120deg 240deg,
    #48dbfb 240deg 360deg
);

/* Starting from a specific angle */
background: conic-gradient(from 45deg, #667eea, #764ba2);

Repeating Gradients

All three gradient types have repeating variants that tile the gradient pattern across the element. This is useful for creating stripes, patterns, and textured backgrounds.

/* Repeating diagonal stripes */
background: repeating-linear-gradient(
    45deg,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
);

/* Repeating radial circles */
background: repeating-radial-gradient(
    circle,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
);

Popular Stripe Patterns

/* Thin horizontal lines (notebook paper) */
background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    #e5e7eb 28px,
    #e5e7eb 29px
);

/* Diagonal candy stripes */
background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 16px
);

Real-World CSS Gradient Patterns

Here are production-ready gradient patterns used in modern web design. Each example is copy-paste ready.

Hero Section Background

.hero {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color: white;
    padding: 80px 20px;
}

Glassmorphism Card Overlay

.glass-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05)
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
}

Button with Gradient & Hover Effect

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-gradient:hover {
    opacity: 0.9;
}

Gradient Text Effect

.gradient-text {
    background: linear-gradient(90deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 3rem;
}

Gradient Border

.gradient-border {
    border: 3px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #667eea, #764ba2) border-box;
    border-radius: 12px;
}

Animated Gradient Background

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
}

Layering Multiple Gradients

CSS allows you to stack multiple background images, and since gradients are images, you can layer them for complex effects. Separate each gradient with a comma:

/* Gradient overlay on top of another gradient */
background:
    linear-gradient(135deg, rgba(102, 126, 234, 0.7), rgba(118, 75, 162, 0.7)),
    linear-gradient(to right, #ff6b6b, #feca57);

/* Dot pattern using radial gradients */
background:
    radial-gradient(circle, #333 1px, transparent 1px),
    radial-gradient(circle, #333 1px, transparent 1px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

/* Mesh gradient (multi-point) */
background:
    radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
    radial-gradient(at 80% 0%, #ec4899 0px, transparent 50%),
    radial-gradient(at 0% 50%, #06b6d4 0px, transparent 50%),
    radial-gradient(at 80% 50%, #f59e0b 0px, transparent 50%),
    radial-gradient(at 0% 100%, #10b981 0px, transparent 50%);

Performance & Browser Compatibility

CSS gradients are well-supported and performant, but there are a few things to keep in mind.

Browser Support

Vendor prefixes (-webkit-, -moz-) are no longer needed for gradient functions in any current browser. The only exception is -webkit-background-clip: text for gradient text effects in Safari.

Performance Tips

• Gradients are rendered by the GPU and are typically very fast
• Animated gradients that change background property trigger repaints. For better performance, animate background-position on an oversized gradient (as shown in the animated gradient example above)
• Avoid layering many complex gradients on elements that scroll or animate frequently
• CSS gradients are always better than gradient images for performance and resolution independence

Common Mistakes and How to Fix Them

Banding (Visible Steps Instead of Smooth Transitions)

On some displays, subtle gradients (like dark gray to slightly darker gray) show visible color bands instead of a smooth transition. Fix this by adding a tiny amount of noise or by widening the color range slightly.

Forgetting the Fallback Color

Always set a solid background-color as a fallback before the gradient. If the gradient fails to render (extremely old browsers or CSS loading issues), the user still sees a reasonable background:

.hero {
    background-color: #302b63; /* fallback */
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

Using background Instead of background-image

The shorthand background property resets all background sub-properties. If you set background-size or background-position before the background shorthand, they will be overwritten. Always put the shorthand first, or use background-image explicitly.

Hard Edges at Color Stop Boundaries

When you want a smooth transition between three or more colors, do not place adjacent color stops at the same position unless you intentionally want a hard edge. Leave a gap between stops for smooth blending.

CSS Gradient Quick Reference

• linear-gradient(direction, colors) for straight-line transitions
• radial-gradient(shape at position, colors) for circular/elliptical transitions
• conic-gradient(from angle at position, colors) for sweep-around transitions
• Use to right, to bottom left, or degree values for direction
• Add percentage values after colors to control stop positions
• Same percentage on two adjacent stops creates a hard edge
• Layer multiple gradients with commas in the background property
• No vendor prefixes needed in any current browser (except -webkit-background-clip: text)
• Always set a solid background-color fallback
• Use a gradient generator tool to build visually and copy the CSS code

Related guides: Favicon Guide · Meta Tags SEO Guide · Base64 Encode/Decode Guide · JSON Formatting Guide