CSS Gradients: The Complete Guide for 2026

1. Introduction to CSS Gradients

CSS gradients let you display smooth transitions between two or more colors directly in the browser, without needing any image files. They are defined using CSS functions and rendered as background-image values, which means they scale to any size with zero pixelation, load instantly because there is no HTTP request, and are fully controllable through CSS properties and custom properties.

Before gradients became a native CSS feature, developers relied on sliced image files, often a 1-pixel-wide PNG repeated across a background. That approach meant extra HTTP requests, fixed color schemes baked into raster files, and awkward responsive behavior. CSS gradients eliminated all of those problems when browsers adopted the W3C specification starting around 2012. Today, every modern browser supports all three gradient types with excellent performance.

CSS provides three distinct gradient functions, each producing a different visual shape:

• linear-gradient() -- transitions along a straight line. This is the most common gradient type and is used for backgrounds, progress bars, overlays, and decorative stripes.
• radial-gradient() -- transitions radiating outward from a center point in a circle or ellipse. Use this for spotlight effects, glowing orbs, and organic shapes.
• conic-gradient() -- transitions sweeping around a center point like a color wheel. Ideal for pie charts, clock faces, and starburst patterns.

All three functions share the same color-stop syntax, and each has a repeating- variant that tiles the gradient pattern. Gradients are treated as images, so they work anywhere background-image is accepted, including list-style-image, border-image, and mask-image. You can even layer multiple gradients together on a single element to create complex patterns without any extra markup.

In this guide we will walk through every gradient type in depth, cover color stops and transition hints, explore advanced techniques like gradient text and gradient borders, examine performance characteristics, and finish with a library of practical, copy-paste-ready recipes you can drop into your projects today.

2. Linear Gradient Syntax and Direction

A linear gradient creates a band of colors along a straight line. The basic syntax is:

background: linear-gradient(<direction>, <color-stop1>, <color-stop2>, ...);

The direction can be specified using keywords or an angle value. If you omit it entirely, the gradient defaults to to bottom (top-to-bottom).

Direction Keywords

The keyword syntax uses to followed by one or two side/corner keywords:

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

/* 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, #43e97b, #38f9d7);

Keyword directions always point toward the named edge or corner, regardless of the element's aspect ratio. A gradient going to bottom right will always terminate at the exact bottom-right corner, which means the computed angle changes if the element is wider or taller.

Angle Values

For precise control, specify the gradient direction as an angle:

/* 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left */
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
background: linear-gradient(135deg, #a18cd1, #fbc2eb);
background: linear-gradient(270deg, #ffecd2, #fcb69f);

The angle system in CSS gradients follows the compass model: 0deg points straight up, 90deg points to the right, 180deg points down, and 270deg points to the left. This is different from the standard math convention where 0 degrees points right. Negative angles and values above 360 degrees are valid and wrap around accordingly.

The Gradient Line

Understanding the gradient line is key to predicting how a gradient will look on non-square elements. The gradient line is an imaginary line running through the center of the element at the specified angle. The gradient extends just far enough on both sides of the element so that the start and end colors reach the corners perpendicular to the gradient line. This is why a 45-degree gradient on a wide rectangle has a longer gradient line than the same gradient on a square.

/* The gradient line always passes through the element center.
   Colors are projected perpendicularly from this line. */
.wide-banner {
    width: 800px;
    height: 200px;
    background: linear-gradient(45deg, #0061ff, #60efff);
}

Multiple Color Stops

You are not limited to two colors. Add as many stops as you need:

/* Rainbow gradient */
background: linear-gradient(
    to right,
    #ff0000,
    #ff7700,
    #ffff00,
    #00ff00,
    #0000ff,
    #8b00ff
);

When no positions are specified, the browser distributes color stops evenly. The first color starts at 0%, the last ends at 100%, and everything in between is spaced equally.

3. Radial Gradient Syntax

Radial gradients radiate outward from a center point. The full syntax is:

background: radial-gradient(<shape> <size> at <position>, <color-stops>);

Shape: Circle vs Ellipse

A radial gradient can be a perfect circle or an ellipse (the default). The shape is inferred from context, or you can declare it explicitly:

/* Ellipse (default) - stretches to fill the element */
background: radial-gradient(ellipse, #667eea, #764ba2);

/* Circle - always a perfect circle regardless of element shape */
background: radial-gradient(circle, #f093fb, #f5576c);

/* Shorthand: just specifying a single length creates a circle */
background: radial-gradient(200px, #43e97b, #38f9d7);

Size Keywords

The size determines how far the gradient extends from its center. Four keywords are available:

/* closest-side: gradient ends at the nearest side */
background: radial-gradient(circle closest-side at 30% 40%, #ff6b6b, #556270);

/* farthest-side: gradient ends at the farthest side */
background: radial-gradient(circle farthest-side at 30% 40%, #ff6b6b, #556270);

/* closest-corner: gradient ends at the nearest corner */
background: radial-gradient(circle closest-corner at 30% 40%, #ff6b6b, #556270);

/* farthest-corner (default): gradient ends at the farthest corner */
background: radial-gradient(circle farthest-corner at 30% 40%, #ff6b6b, #556270);

The default is farthest-corner, which means the gradient reaches just far enough that its last color stop touches the farthest corner of the element. This produces the most visually complete gradient in most cases.

Explicit Sizes

You can set exact dimensions instead of using keywords:

/* Circle with explicit radius */
background: radial-gradient(circle 100px at center, #00c6ff, #0072ff);

/* Ellipse with explicit width and height */
background: radial-gradient(200px 100px at center, #f5af19, #f12711);

Position

The at <position> part sets the gradient's center. It accepts the same values as background-position:

/* Center (default) */
background: radial-gradient(circle at center, #667eea, #764ba2);

/* Top-left corner */
background: radial-gradient(circle at top left, #f093fb, #f5576c);

/* Specific coordinates */
background: radial-gradient(circle at 25% 75%, #43e97b, #38f9d7);

/* Pixel values */
background: radial-gradient(circle at 100px 50px, #a18cd1, #fbc2eb);

Positioning the center off-element is perfectly valid. This is useful for creating vignette effects or light sources that appear to originate outside the viewport.

4. Conic Gradient Syntax

Conic gradients (also called angular gradients) create color transitions that sweep around a center point, like the hands of a clock. The syntax is:

background: conic-gradient(from <angle> at <position>, <color-stops>);

Basic Conic Gradient

/* Simple two-color sweep */
background: conic-gradient(#ff6b6b, #556270);

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

/* Positioned at a specific point */
background: conic-gradient(at 25% 50%, #f093fb, #f5576c, #f093fb);

Color stops in a conic gradient are specified in degrees (or percentages) around the circle, starting from the from angle (which defaults to 0deg, i.e., 12 o'clock) and sweeping clockwise.

Creating a Color Wheel

/* Full color wheel using hue stops */
background: conic-gradient(
    from 0deg,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
);
border-radius: 50%;

Pie Charts with Conic Gradients

One of the most practical uses for conic gradients is creating pure-CSS pie charts with no JavaScript or SVG required:

/* Pie chart: 40% blue, 30% green, 30% orange */
.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #4facfe 0% 40%,
        #43e97b 40% 70%,
        #f5576c 70% 100%
    );
}

By placing hard color stops (two colors at the same percentage), you get sharp boundaries between segments rather than smooth blends. This technique is cleaner than SVG for simple charts and works with CSS custom properties to make the values dynamic.

Combining from and at

/* Rotate the starting angle AND offset the center */
background: conic-gradient(
    from 90deg at 75% 25%,
    #0061ff 0%,
    #60efff 50%,
    #0061ff 100%
);

The from keyword rotates where 0% begins, and the at keyword moves the center point. These can be combined freely.

5. Color Stops and Transitions

Color stops are the building blocks of every gradient. Understanding how they work gives you precise control over where each color appears and how it blends into the next.

Basic Color Stop Syntax

/* Color only (auto-distributed evenly) */
background: linear-gradient(to right, red, yellow, green);

/* Color with position (percentage) */
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);

/* Color with position (length) */
background: linear-gradient(to right, red 0px, yellow 100px, green 400px);

When you specify positions, colors transition smoothly between them. If the first stop is not at 0% or the last is not at 100%, the first and last colors extend to fill the remaining space as solid regions.

Hard Stops (No Blending)

Placing two adjacent colors at the same position eliminates the transition between them, creating a hard edge:

/* Sharp split: left half red, right half blue */
background: linear-gradient(to right, #ff6b6b 50%, #556270 50%);

/* Three equal stripes */
background: linear-gradient(
    to right,
    #e94560 33.33%,
    #0f3460 33.33% 66.66%,
    #16213e 66.66%
);

Two-Position Color Stops

Modern CSS allows you to specify two positions for a single color, which is shorthand for repeating that color at two stops. This was introduced to make stripes and hard-edge patterns easier to write:

/* Two-position syntax: color occupies a range */
background: linear-gradient(
    to right,
    #667eea 0% 25%,     /* solid blue from 0% to 25% */
    #764ba2 25% 50%,    /* solid purple from 25% to 50% */
    #f093fb 50% 75%,    /* solid pink from 50% to 75% */
    #f5576c 75% 100%    /* solid coral from 75% to 100% */
);

Transition Hints (Midpoints)

A transition hint is a bare percentage or length value placed between two color stops. It shifts the midpoint of the transition, allowing you to control the blending curve:

/* Without hint: linear blend, midpoint at 50% */
background: linear-gradient(to right, #0061ff, #60efff);

/* With hint at 25%: most of the transition happens in the first quarter */
background: linear-gradient(to right, #0061ff, 25%, #60efff);

/* With hint at 75%: transition is delayed, then happens quickly at the end */
background: linear-gradient(to right, #0061ff, 75%, #60efff);

Transition hints are the CSS equivalent of adjusting the curve in a design tool. They let you make one color dominate more of the gradient without adding extra stops.

Color Formats

Gradients accept any valid CSS color value. Mixing formats is fine:

background: linear-gradient(
    to right,
    #ff6b6b,                      /* hex */
    rgb(255, 165, 0),             /* rgb */
    hsl(60, 100%, 50%),           /* hsl */
    oklch(0.7 0.15 180),          /* oklch (perceptually uniform) */
    color(display-p3 0 0.8 0.3),  /* wide-gamut display-p3 */
    transparent                    /* keyword */
);

For perceptually smooth gradients, consider using oklch() or oklab() color functions. Traditional sRGB interpolation can produce muddy middle tones (for example, a gradient from blue to yellow passes through a dull gray in RGB, but stays vibrant through oklch). The CSS color-interpolation property and in oklch syntax in gradients address this directly:

/* Perceptually uniform interpolation */
background: linear-gradient(in oklch to right, blue, yellow);

/* sRGB interpolation (default, can look muddy) */
background: linear-gradient(to right, blue, yellow);

6. Repeating Gradients

Each gradient type has a repeating variant that tiles the gradient pattern infinitely. The syntax is identical except for the function name:

repeating-linear-gradient(...)
repeating-radial-gradient(...)
repeating-conic-gradient(...)

Repeating Linear Gradient

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

The gradient pattern repeats starting from the last color stop. The key rule: the last color stop must not be at 100% or farthest-corner, otherwise there is nothing to repeat. Instead, use absolute lengths (px, em, rem) or explicit percentages smaller than 100%.

Repeating Radial Gradient

/* Concentric rings */
background: repeating-radial-gradient(
    circle at center,
    #0f3460 0px,
    #0f3460 10px,
    #16213e 10px,
    #16213e 20px
);

Repeating Conic Gradient

/* Starburst / sunburst pattern */
background: repeating-conic-gradient(
    #667eea 0deg 10deg,
    #764ba2 10deg 20deg
);

Repeating conic gradients are particularly useful for creating starburst backgrounds, radar sweep animations, and decorative elements. The repeat unit is defined in degrees (or turns), and the pattern tiles around the full 360 degrees.

Common Pitfall: Aliased Edges

Repeating gradients with hard stops can show jagged aliasing artifacts. To soften the edges, add a tiny transition zone of half a pixel to one pixel between colors:

/* Harsh edges (may show aliasing) */
background: repeating-linear-gradient(
    45deg,
    #667eea 0px 10px,
    #764ba2 10px 20px
);

/* Smooth edges (anti-aliased) */
background: repeating-linear-gradient(
    45deg,
    #667eea 0px 9.5px,
    #764ba2 10.5px 19.5px
);

7. Multiple Gradients (Layering)

Since gradients are background images, you can stack multiple gradients on the same element using comma-separated background-image values. The first gradient listed sits on top, and subsequent gradients are layered behind it. Transparency is essential for making lower layers visible.

/* Layered gradient with transparent overlay */
background:
    linear-gradient(135deg, rgba(102, 126, 234, 0.5), transparent 60%),
    linear-gradient(225deg, rgba(240, 147, 251, 0.5), transparent 60%),
    linear-gradient(315deg, rgba(67, 233, 123, 0.5), transparent 60%),
    #0a192f;

Controlling Individual Layers

When using separate background-* properties, each layer can have its own size, position, and repeat behavior:

.layered-pattern {
    background-image:
        linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #0a192f;
}

This creates a subtle grid pattern, perfect for dashboard backgrounds or code editor themes. Each gradient creates one set of lines (horizontal and vertical), and background-size controls the spacing.

Gradient + Image Combinations

Gradients and images can be mixed in the same background stack:

/* Dark overlay on a photo */
.hero-section {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3)),
        url('/images/hero.jpg') center/cover no-repeat;
}

This is one of the most common gradient patterns in web design. The semi-transparent gradient ensures text remains readable over any photo.

8. Gradient Text Effects

Applying a gradient to text is one of the most visually striking CSS techniques. The approach uses background clipping to make the gradient visible only through the text shape:

.gradient-text {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback for non-webkit */
}

Here is how it works step by step:

1. The gradient is applied as the element's background-image.
2. background-clip: text clips the background so it is only visible behind the text glyphs.
3. -webkit-text-fill-color: transparent (or color: transparent) makes the text fill invisible, revealing the gradient behind it.

Animated Gradient Text

.animated-gradient-text {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease infinite;
}

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

By making the background larger than the element and animating background-position, the gradient appears to flow through the text. This technique is widely used for hero headings and landing page titles.

Accessibility Note

Gradient text can fail accessibility contrast checks because the color varies along the text. Ensure the lightest part of the gradient still meets WCAG AA contrast requirements against the background. Also provide a solid color fallback for browsers that do not support background-clip: text.

9. Gradient Borders

CSS does not have a border-gradient property, but there are several reliable techniques to achieve gradient borders.

Method 1: border-image

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

This is the simplest approach, but it has a significant limitation: border-image does not work with border-radius. If you need rounded corners, use one of the methods below.

Method 2: background-clip with Padding

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

This is the cleanest modern solution. The inner background (using padding-box) covers the content area with a solid color, while the outer background (using border-box) provides the gradient. The transparent border creates the visible gap where the gradient shows through. This approach fully supports border-radius.

Method 3: Pseudo-Element Technique

.gradient-border-pseudo {
    position: relative;
    background: #16213e;
    border-radius: 8px;
    padding: 1.5rem;
}

.gradient-border-pseudo::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 11px; /* border-radius + border-width */
    background: linear-gradient(135deg, #667eea, #764ba2);
    z-index: -1;
}

The pseudo-element sits behind the main element and extends outward by the desired border width using negative inset. This approach is more verbose but gives you complete control and works in all scenarios, including animated gradient borders.

Method 4: Mask Composite for Complex Shapes

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

This uses CSS masking to cut out the content area from the gradient background. The result is a gradient visible only in the border region. It is the most flexible approach for irregular shapes and works with any gradient type.

10. Common Gradient Patterns

CSS gradients can produce geometric patterns that traditionally required image tiles. Here are proven recipes for the most commonly needed patterns.

Horizontal Stripes

.horizontal-stripes {
    background: repeating-linear-gradient(
        0deg,
        #0f3460 0px,
        #0f3460 10px,
        #16213e 10px,
        #16213e 20px
    );
}

Diagonal Stripes

.diagonal-stripes {
    background: repeating-linear-gradient(
        45deg,
        transparent 0px,
        transparent 10px,
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.05) 20px
    );
    background-color: #0a192f;
}

Checkerboard

.checkerboard {
    background:
        conic-gradient(#16213e 25%, #0f3460 0 50%, #16213e 0 75%, #0f3460 0);
    background-size: 40px 40px;
}

Polka Dots

.polka-dots {
    background:
        radial-gradient(circle, #e94560 4px, transparent 4px);
    background-size: 30px 30px;
    background-color: #0a192f;
}

Grid / Graph Paper

.grid-pattern {
    background:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #0a192f;
}

Carbon Fiber

.carbon-fiber {
    background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,0.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,0.1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
}

Zigzag / Chevron

.zigzag {
    background:
        linear-gradient(135deg, #0f3460 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, #0f3460 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, #0f3460 25%, transparent 25%),
        linear-gradient(45deg, #0f3460 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #16213e;
}

Noise Texture Approximation

.noise-texture {
    background:
        repeating-radial-gradient(circle at 17% 32%, #fff1 0px, transparent 1px),
        repeating-radial-gradient(circle at 62% 88%, #fff1 0px, transparent 1px),
        repeating-radial-gradient(circle at 89% 14%, #fff1 0px, transparent 1px);
    background-size: 7px 7px, 11px 11px, 13px 13px;
    background-color: #0a192f;
}

While CSS gradients cannot produce true random noise, layering several small radial gradient patterns with prime-number sizes creates an approximation that avoids obvious repetition.

11. Performance Considerations

CSS gradients are rendered entirely by the browser's rendering engine during the paint phase. Here is what you need to know about their performance characteristics.

Gradients vs Images

When Gradients Are Fast

• Simple gradients (2-5 stops): Negligible rendering cost. Use freely on any element.
• Static gradients: Painted once and cached by the browser's layer system.
• background-size tiled patterns: The browser renders the small tile once and repeats it efficiently.

When Gradients Can Be Slow

• Animating the gradient itself: Changing gradient colors or positions triggers a repaint on every frame. This is significantly more expensive than animating transform or opacity, which are compositor-only properties.
• Very large elements: A gradient spanning thousands of pixels with many stops uses more GPU memory and paint time.
• Many layered gradients: Each layer is painted separately. Ten overlapping gradients on a full-viewport element will be noticeably slower than two.
• Repeating gradients with tiny tiles: If the tile size is only a few pixels but the element is very large, the renderer has to compute many tiles.

Performance Best Practices

1. Animate position, not the gradient: Instead of changing gradient colors, animate background-position on an oversized gradient.
2. Use will-change: transform: Promote gradient elements to their own compositor layer if they will be animated.
3. Keep color stops minimal: A 4-stop gradient renders faster than a 40-stop gradient.
4. Prefer fixed sizes: Using background-size with concrete pixel values lets the browser optimize tiling.
5. Test on low-end devices: Gradient performance varies significantly across hardware. Test on mobile devices with weaker GPUs.

/* Efficient: animate background-position, not gradient values */
.animated-bg {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 400% 100%;
    animation: slide 8s linear infinite;
}

@keyframes slide {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

/* Inefficient: redefining gradient on every frame (avoid this) */
@keyframes bad-gradient {
    0% { background: linear-gradient(to right, red, blue); }
    100% { background: linear-gradient(to right, blue, red); }
}

12. Browser Support and Fallbacks

Browser support for CSS gradients is excellent in 2026. All modern browsers have supported the standard syntax for over a decade.

Fallback Strategies

If you need to support very old browsers (unlikely in 2026, but relevant for enterprise environments), use progressive enhancement:

/* Fallback solid color for ancient browsers */
.gradient-bg {
    background-color: #667eea;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Conic gradient with radial fallback */
.pie-chart {
    background: radial-gradient(circle, #667eea, #764ba2); /* fallback */
    background: conic-gradient(#667eea 0% 40%, #764ba2 40% 100%);
}

The CSS cascade handles fallbacks naturally. Browsers that do not understand a newer function ignore the declaration and keep the previous valid value. This means you can stack a solid color, then a linear gradient, then a conic gradient, and each browser uses the most advanced version it supports.

Vendor Prefixes

Vendor prefixes (-webkit-, -moz-) for gradients are unnecessary in 2026. All actively maintained browsers have supported the unprefixed syntax since at least 2013. The only exception is background-clip: text, which still requires -webkit-background-clip: text in some WebKit-based browsers:

/* background-clip: text still needs prefix */
.gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
}

Feature Detection

/* CSS @supports for conic gradients */
@supports (background: conic-gradient(red, blue)) {
    .chart {
        background: conic-gradient(#667eea 0% 40%, #764ba2 40% 100%);
    }
}

/* JavaScript feature detection */
if (CSS.supports('background', 'conic-gradient(red, blue)')) {
    // Use conic gradient
} else {
    // Fallback
}

13. Practical Examples and Recipes

Here are production-ready gradient recipes you can copy directly into your projects.

Frosted Glass Card

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

Gradient Button with Hover

.gradient-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 200% 200%;
    transition: background-position 0.4s ease, box-shadow 0.3s ease;
}

.gradient-btn:hover {
    background-position: 100% 100%;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

Mesh Gradient Background

.mesh-gradient {
    background:
        radial-gradient(at 20% 80%, rgba(102, 126, 234, 0.6) 0%, transparent 50%),
        radial-gradient(at 80% 20%, rgba(240, 147, 251, 0.6) 0%, transparent 50%),
        radial-gradient(at 40% 40%, rgba(67, 233, 123, 0.4) 0%, transparent 50%),
        radial-gradient(at 90% 90%, rgba(245, 87, 108, 0.4) 0%, transparent 50%);
    background-color: #0a192f;
}

Mesh gradients use multiple radial gradients placed at different positions with transparency to simulate the smooth, organic blending seen in design tools like Figma and Sketch.

Progress Bar

.progress-bar {
    height: 8px;
    border-radius: 4px;
    background: #1a1a2e;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    transition: width 0.3s ease;
}

Gradient Shadow

/* Pseudo-element gradient shadow (more colorful than box-shadow) */
.gradient-shadow {
    position: relative;
}

.gradient-shadow::after {
    content: '';
    position: absolute;
    inset: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    z-index: -1;
    filter: blur(20px);
    opacity: 0.6;
    border-radius: inherit;
}

Gradient Underline on Hover

.gradient-underline {
    text-decoration: none;
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
    padding-bottom: 2px;
}

.gradient-underline:hover {
    background-size: 100% 2px;
}

Scrolling Gradient Banner

.scrolling-gradient {
    background: linear-gradient(
        90deg,
        #667eea, #764ba2, #f093fb, #f5576c, #43e97b, #667eea
    );
    background-size: 300% 100%;
    animation: scroll-gradient 10s linear infinite;
    padding: 1rem 2rem;
    color: white;
}

@keyframes scroll-gradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

Vignette Effect

.vignette {
    position: relative;
}

.vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

Gradient Divider Line

.gradient-divider {
    height: 2px;
    border: none;
    background: linear-gradient(
        to right,
        transparent,
        #667eea 20%,
        #764ba2 80%,
        transparent
    );
    margin: 2rem 0;
}

Using CSS Custom Properties for Dynamic Gradients

:root {
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
    --gradient-angle: 135deg;
}

.dynamic-gradient {
    background: linear-gradient(
        var(--gradient-angle),
        var(--gradient-start),
        var(--gradient-end)
    );
}

/* Change the gradient with a class or JavaScript */
.warm-theme {
    --gradient-start: #f5576c;
    --gradient-end: #f093fb;
}

/* JavaScript: dynamically update */
// element.style.setProperty('--gradient-start', '#43e97b');
// element.style.setProperty('--gradient-end', '#38f9d7');

Custom properties make gradients themeable and dynamic. Since changing a custom property triggers a repaint only for elements that use it, this approach is more efficient than replacing entire gradient declarations with JavaScript.

14. Frequently Asked Questions

Conclusion

CSS gradients are one of the most versatile tools in a front-end developer's arsenal. From simple two-color backgrounds to complex geometric patterns, gradients replace image files with scalable, cacheable, animatable CSS that loads instantly and looks sharp at any resolution.

The three gradient types -- linear, radial, and conic -- combined with repeating variants, multiple layering, and techniques like gradient text, gradient borders, and CSS custom properties give you an enormous range of visual possibilities without leaving your stylesheet. Color interpolation in perceptual color spaces like oklch brings even smoother, more vibrant results.

Understanding color stops, transition hints, and the gradient line model lets you achieve precise control over every aspect of the gradient. And by following performance best practices (animate position, not values; keep stop counts reasonable; test on real devices), you can use gradients liberally without worrying about frame rate drops.

Whether you are building a landing page hero section, a data visualization, a micro-interaction, or a reusable component library, CSS gradients should be one of the first tools you reach for.