Complex Gradients

CSS gradients are generated images. They are not properties like color or border: they are values used anywhere an image is accepted, most commonly in background-image. Because they are generated by the browser rather than loaded from a file, they are infinitely scalable, require no network request, and can be animated or transitioned.

You have likely used basic linear gradients before. This reading goes further: radial and conic gradients, repeating variants that create patterns, layering multiple gradients on a single element, and creative techniques that go well beyond simple color fades. The goal is to expand your mental model of what gradients can do.

Linear Gradients

A linear gradient transitions between colors along a straight line. The line direction defaults to top-to-bottom but can be any angle or keyword direction.

        /* Top to bottom (default) */
        .element {
            background-image: linear-gradient(#3b82f6, #8b5cf6);
        }

        /* Left to right */
        .element {
            background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
        }

        /* 45 degree angle */
        .element {
            background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
        }

        /* Multiple color stops */
        .element {
            background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6);
        }
    

Color Stop Positions

By default, color stops are distributed evenly. You can control exactly where each stop falls using length values or percentages. Two stops at the same position create a hard edge with no transition.

        /* Custom stop positions */
        .element {
            background-image: linear-gradient(
                to right,
                #3b82f6 0%,
                #3b82f6 40%,
                #8b5cf6 60%,
                #8b5cf6 100%
            );
        }

        /* Hard stop: sharp color boundary with no fade */
        .element {
            background-image: linear-gradient(
                to right,
                #3b82f6 50%,
                #8b5cf6 50%
            );
        }
    

Hard stops are significant. A gradient with hard stops is not a gradient in the visual sense at all: it is a way to divide an element into solid color regions using a single CSS property. This technique is foundational to creating patterns with CSS.

Transparent Stops and Overlays

Gradients can fade to transparent, which is useful for image overlays, fade-out effects, and layering text over photographs.

        /* Fade from color to transparent */
        .overlay {
            background-image: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.7) 100%
            );
        }

        /* Vignette effect: transparent center, dark edges */
        .vignette {
            background-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.3) 0%,
                transparent 30%,
                transparent 70%,
                rgba(0, 0, 0, 0.3) 100%
            );
        }
    

Radial Gradients

A radial gradient radiates outward from a center point in an elliptical or circular shape. Where linear gradients draw a line, radial gradients draw rings.

        /* Default: ellipse centered on element */
        .element {
            background-image: radial-gradient(#3b82f6, #1e1b4b);
        }

        /* Explicit circle shape */
        .element {
            background-image: radial-gradient(circle, #3b82f6, #1e1b4b);
        }

        /* Positioned center: moved to top-left */
        .element {
            background-image: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
        }

        /* Explicit size */
        .element {
            background-image: radial-gradient(circle 200px at center, #3b82f6, transparent);
        }
    

Radial Gradient Applications

Radial gradients are particularly effective for lighting effects, glows, and spotlight-style backgrounds. Positioning the center off-screen creates an ambient light source feeling.

        /* Spotlight from above */
        .hero {
            background-image: radial-gradient(
                ellipse 80% 50% at 50% -20%,
                #3b82f620,
                transparent
            );
        }

        /* Glow effect behind an element */
        .glow-card {
            background-image: radial-gradient(
                circle 30rem at 50% 50%,
                #8b5cf615,
                transparent 70%
            );
        }
    

Conic Gradients

A conic gradient sweeps color stops around a center point like the hands of a clock, rather than radiating outward like a radial gradient. The color transitions happen along the angle, not the radius. This makes conic gradients the right tool for pie charts, color wheels, and certain geometric patterns.

        /* Basic conic gradient */
        .element {
            background-image: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #3b82f6);
        }

        /* Starting angle */
        .element {
            background-image: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);
        }

        /* Positioned center */
        .element {
            background-image: conic-gradient(from 0deg at 30% 50%, #3b82f6, #8b5cf6);
        }
    

Pie Charts with conic-gradient

Hard stops in a conic gradient divide the element into solid wedge sectors, making simple pie charts achievable in pure CSS. Each sector is defined by two stops at the same angle position.

        /* A three-sector pie chart */
        .pie-chart {
            width: 20rem;
            height: 20rem;
            border-radius: 50%;
            background-image: conic-gradient(
                #3b82f6 0deg 120deg,       /* 33% blue */
                #8b5cf6 120deg 240deg,     /* 33% purple */
                #ec4899 240deg 360deg      /* 33% pink */
            );
        }
    

Color Wheels

A full-spectrum color wheel is a single line of CSS with a conic gradient and a border radius.

        .color-wheel {
            width: 20rem;
            height: 20rem;
            border-radius: 50%;
            background-image: conic-gradient(
                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%)
            );
        }
    

Gradient Demo

The demo below shows all three gradient types applied to the same element. Use the buttons to compare the visual character of each.

Repeating Gradients

All three gradient types have a repeating variant: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). Instead of filling the element once, the gradient pattern tiles repeatedly until the element is covered.

Repeating gradients are defined the same way as their non-repeating counterparts, but the browser repeats the pattern from the last stop back to the first. The key to making them work cleanly is defining where the last stop ends, giving the browser a clear pattern length to repeat.

        /* Diagonal stripes */
        .stripes {
            background-image: repeating-linear-gradient(
                45deg,
                #3b82f6 0px,
                #3b82f6 10px,
                transparent 10px,
                transparent 20px
            );
        }

        /* Concentric rings */
        .rings {
            background-image: repeating-radial-gradient(
                circle at center,
                #3b82f6 0px,
                #3b82f6 5px,
                transparent 5px,
                transparent 15px
            );
        }

        /* Repeating conic pie slices */
        .pinwheel {
            background-image: repeating-conic-gradient(
                #3b82f6 0deg 30deg,
                #8b5cf6 30deg 60deg
            );
        }
    

The stripe pattern above works by alternating between a solid color and transparent in equal steps. Changing the angle changes the stripe direction. Changing the step values changes the stripe width. This same technique, varying just two parameters, generates stripes, chevrons, and zigzags.

CSS Gradient Patterns

Hard stops combined with repeating gradients produce CSS patterns: checkerboards, grids, dots, and more. These patterns require no image files and scale perfectly at any size. The trick is understanding that a gradient with only hard stops produces flat color regions, and repeating tiles those regions.

Checkerboard

A checkerboard uses two linear gradients layered together. Each gradient covers half the squares, and together they tile into a complete checker pattern.

        .checkerboard {
            background-color: #3b82f6;
            background-image:
                linear-gradient(45deg, #8b5cf6 25%, transparent 25%),
                linear-gradient(-45deg, #8b5cf6 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #8b5cf6 75%),
                linear-gradient(-45deg, transparent 75%, #8b5cf6 75%);
            background-size: 40px 40px;
            background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
        }
    

Dot Grid

        .dot-grid {
            background-color: #1e1b4b;
            background-image: radial-gradient(
                circle,
                #3b82f640 1px,
                transparent 1px
            );
            background-size: 24px 24px;
        }
    

Line Grid

        .line-grid {
            background-color: #0f172a;
            background-image:
                linear-gradient(#3b82f615 1px, transparent 1px),
                linear-gradient(90deg, #3b82f615 1px, transparent 1px);
            background-size: 40px 40px;
        }
    

These patterns are commonly used as section backgrounds, hero areas, and card backgrounds to add visual texture without images. Adjusting the background-size scales the pattern. Adjusting the color opacity controls how subtle or prominent it appears.

Pattern Demo

Layering Multiple Gradients

The background-image property accepts a comma-separated list of values. Each value is a separate layer, stacked from front to back. The first gradient in the list sits on top, the last sits behind. This layering system makes complex background compositions possible without touching Photoshop.

        /* Gradient overlay on top of a color base */
        .element {
            background-image:
                linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8) 100%),
                linear-gradient(135deg, #3b82f620, #8b5cf620);
            background-color: #1e1b4b;
        }
    

Because gradients are background images, they layer on top of background-color. The color always sits furthest back. This means a transparent gradient stop reveals the background color beneath it, giving you a three-tier system: gradient layers on top, solid color base at the bottom.

        /* Dot grid pattern with a gradient overlay */
        .hero {
            background-color: #0f172a;
            background-image:
                radial-gradient(ellipse 80% 60% at 50% 0%, #3b82f625, transparent),
                radial-gradient(circle, #ffffff10 1px, transparent 1px);
            background-size: auto, 28px 28px;
        }
    

When layering gradients with different background-size or background-position values, those properties also accept comma-separated lists that correspond positionally to each gradient layer. The first size applies to the first gradient, the second to the second, and so on.

Putting It Together

Gradients become powerful when you think of them as a compositing system rather than a coloring tool. A linear gradient can be a stripe, a divider, or an overlay. A radial gradient can be a glow, a spotlight, or a dot. A conic gradient can be a pie chart, a color wheel, or a pinwheel. Repeating any of them tiles the pattern. Layering them composes effects that would otherwise require image editing software.

The practical skill to develop is reading gradient CSS and visualizing what it produces. Work backward from the values: find the angle or shape, trace the stops, note where hard edges fall, and identify what each layer contributes. That mental model is what lets you write gradient CSS confidently rather than tweaking values until something looks right.