CSS3 & Responsive Design

Gradients: Linear, Radial & Conic

25 min Lesson 14 of 60

Introduction to CSS Gradients

CSS gradients allow you to create smooth, seamless transitions between two or more colors without using any image files. They are generated by the browser as background-image values, which means they are resolution-independent (they look sharp on any screen, including Retina displays), load instantly (no HTTP requests), and can be resized without quality loss. Gradients are one of the most versatile tools in CSS for adding visual depth, creating patterns, building decorative effects, and enhancing the overall design of your web pages.

CSS provides three types of gradient functions: linear-gradient() for straight-line transitions, radial-gradient() for circular or elliptical transitions, and conic-gradient() for angular transitions around a center point. Each type also has a repeating- variant for creating tiled patterns. In this lesson, we will explore all three types in depth, including advanced techniques for creating stripes, patterns, text effects, and creative overlays.

Linear Gradients

A linear gradient creates a color transition along a straight line. You define the direction of the gradient and two or more color stops, and the browser smoothly blends between them. Linear gradients are the most commonly used type and form the foundation for understanding all other gradient types.

Basic Syntax and Direction

The basic syntax is: linear-gradient(direction, color1, color2, ...)

The direction can be specified as a keyword or an angle:

  • to bottom (default) -- Gradient flows from top to bottom.
  • to top -- Gradient flows from bottom to top.
  • to right -- Gradient flows from left to right.
  • to left -- Gradient flows from right to left.
  • to bottom right -- Gradient flows diagonally toward the bottom-right corner.
  • to top left -- Gradient flows diagonally toward the top-left corner.

Example: Basic Linear Gradients

/* Default: top to bottom */
.gradient-default {
    background-image: linear-gradient(#3498db, #2ecc71);
}

/* Keyword directions */
.gradient-right {
    background-image: linear-gradient(to right, #3498db, #2ecc71);
}
.gradient-left {
    background-image: linear-gradient(to left, #e74c3c, #f39c12);
}
.gradient-top {
    background-image: linear-gradient(to top, #8e44ad, #3498db);
}

/* Diagonal directions */
.gradient-diagonal {
    background-image: linear-gradient(to bottom right, #667eea, #764ba2);
}
.gradient-diagonal-2 {
    background-image: linear-gradient(to top left, #f093fb, #f5576c);
}

Angle-Based Directions

For precise control, you can specify the direction as an angle in degrees. The angle defines the direction the gradient line points toward. 0deg points upward, 90deg points to the right, 180deg points downward, and 270deg points to the left. You can use any value between 0 and 360, including decimals.

Example: Angle-Based Gradients

/* Common angles */
.angle-0 {
    background-image: linear-gradient(0deg, #3498db, #2ecc71);
    /* Same as "to top" */
}
.angle-45 {
    background-image: linear-gradient(45deg, #3498db, #2ecc71);
    /* Diagonal: bottom-left to top-right */
}
.angle-90 {
    background-image: linear-gradient(90deg, #3498db, #2ecc71);
    /* Same as "to right" */
}
.angle-135 {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    /* Diagonal: top-left to bottom-right */
}
.angle-180 {
    background-image: linear-gradient(180deg, #3498db, #2ecc71);
    /* Same as "to bottom" (default) */
}
.angle-270 {
    background-image: linear-gradient(270deg, #3498db, #2ecc71);
    /* Same as "to left" */
}

/* Subtle angled gradient for a modern card */
.modern-card {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
}
Note: There is a subtle difference between keyword directions and angle directions when applied to non-square elements. The keyword to bottom right always points exactly to the bottom-right corner of the element, while 135deg always points at exactly 135 degrees regardless of the element's shape. For square elements they are identical, but for rectangular elements the results differ slightly.

Color Stops and Positions

Color stops define where each color appears along the gradient line. By default, colors are evenly distributed, but you can control the exact position of each stop using percentages or lengths.

Example: Controlling Color Stop Positions

/* Default: colors are evenly distributed */
.even {
    background-image: linear-gradient(to right, red, yellow, green);
    /* red at 0%, yellow at 50%, green at 100% */
}

/* Custom positions */
.custom-stops {
    background-image: linear-gradient(to right,
        #3498db 0%,
        #3498db 30%,   /* Blue holds from 0% to 30% */
        #2ecc71 70%,   /* Transition happens between 30% and 70% */
        #2ecc71 100%   /* Green holds from 70% to 100% */
    );
}

/* Push the transition point */
.mostly-blue {
    background-image: linear-gradient(to right,
        #3498db 70%,  /* Blue takes up 70% of the space */
        #2ecc71       /* Green fills the remaining 30% */
    );
}

/* Multiple color stops */
.rainbow {
    background-image: linear-gradient(to right,
        hsl(0, 100%, 50%),    /* Red */
        hsl(60, 100%, 50%),   /* Yellow */
        hsl(120, 100%, 50%),  /* Green */
        hsl(180, 100%, 50%),  /* Cyan */
        hsl(240, 100%, 50%),  /* Blue */
        hsl(300, 100%, 50%)   /* Magenta */
    );
}

/* Using pixel values for stop positions */
.pixel-stops {
    background-image: linear-gradient(to right,
        #3498db 0px,
        #3498db 200px,   /* Blue for the first 200px */
        #2ecc71 200px,   /* Green starts immediately at 200px */
        #2ecc71          /* Green fills the rest */
    );
}

Hard Color Stops (Creating Stripes)

When two adjacent color stops share the same position, there is no gradual transition between them -- the color changes instantly. This technique creates hard lines and is the foundation for creating stripes and geometric patterns with CSS gradients.

Example: Hard Stops for Stripes

/* Two-color horizontal stripes */
.hard-stop {
    background-image: linear-gradient(to right,
        #3498db 50%,  /* Blue fills exactly half */
        #2ecc71 50%   /* Green starts exactly at the halfway point */
    );
}

/* Three equal vertical stripes (like a flag) */
.three-stripes {
    background-image: linear-gradient(to right,
        #002395 33.33%,  /* Blue */
        #ffffff 33.33%,  /* White starts where blue ends */
        #ffffff 66.66%,  /* White ends at two-thirds */
        #ed2939 66.66%   /* Red starts where white ends */
    );
}

/* Diagonal stripes */
.diagonal-stripes {
    background-image: linear-gradient(45deg,
        #3498db 25%,
        #2ecc71 25%,
        #2ecc71 50%,
        #3498db 50%,
        #3498db 75%,
        #2ecc71 75%
    );
    background-size: 40px 40px;
}

/* Progress bar effect */
.progress-bar {
    background-image: linear-gradient(to right,
        #2ecc71 0%,
        #2ecc71 65%,     /* Filled portion (65%) */
        #ecf0f1 65%,     /* Unfilled starts at 65% */
        #ecf0f1 100%
    );
    height: 20px;
    border-radius: 10px;
}
Tip: To create smooth-looking diagonal stripes that tile perfectly, use repeating-linear-gradient() instead of manually calculating the background-size. It handles the math for you and produces cleaner results, which we will explore later in this lesson.

Color Hints (Midpoints)

A color hint is a bare length or percentage placed between two color stops that shifts where the midpoint of the transition occurs. This allows you to control the transition curve without adding extra color stops.

Example: Color Hints

/* Default: midpoint is exactly between the two stops (50%) */
.default-midpoint {
    background-image: linear-gradient(to right, #3498db, #2ecc71);
}

/* Shift midpoint toward the left (more green visible) */
.shifted-midpoint {
    background-image: linear-gradient(to right, #3498db, 25%, #2ecc71);
    /* The transition midpoint is at 25% instead of 50% */
    /* Blue transitions to green faster */
}

/* Shift midpoint toward the right (more blue visible) */
.shifted-right {
    background-image: linear-gradient(to right, #3498db, 75%, #2ecc71);
    /* Blue holds longer before transitioning to green */
}

/* Multiple color hints */
.multi-hint {
    background-image: linear-gradient(to right,
        #e74c3c,
        30%,       /* Red-to-yellow midpoint at 30% */
        #f1c40f,
        70%,       /* Yellow-to-green midpoint at 70% */
        #2ecc71
    );
}

Radial Gradients

A radial gradient creates a color transition that radiates outward from a center point in a circular or elliptical shape. Unlike linear gradients that transition along a straight line, radial gradients transition along all directions from a single origin point.

Basic Radial Gradient Syntax

The syntax is: radial-gradient(shape size at position, color1, color2, ...)

Example: Basic Radial Gradients

/* Default: ellipse that fills the element */
.radial-default {
    background-image: radial-gradient(#3498db, #2c3e50);
}

/* Explicit circle shape */
.radial-circle {
    background-image: radial-gradient(circle, #3498db, #2c3e50);
}

/* Explicit ellipse shape (default) */
.radial-ellipse {
    background-image: radial-gradient(ellipse, #3498db, #2c3e50);
}

/* Multiple color stops */
.radial-multi {
    background-image: radial-gradient(circle,
        #f39c12,   /* Gold center */
        #e74c3c,   /* Red middle */
        #8e44ad    /* Purple edge */
    );
}

/* Spotlight effect */
.spotlight {
    background-image: radial-gradient(circle,
        rgba(255, 255, 255, 0.3),
        transparent 70%
    );
    background-color: #2c3e50;
}

Controlling Shape and Size

The size of a radial gradient determines where the outer edge of the gradient ends. CSS provides four size keywords and also accepts explicit length values:

  • closest-side -- The gradient extends to the nearest edge of the element from the center.
  • farthest-side -- The gradient extends to the farthest edge from the center.
  • closest-corner -- The gradient extends to the nearest corner of the element.
  • farthest-corner (default) -- The gradient extends to the farthest corner of the element.

Example: Radial Gradient Sizes

/* Size keywords */
.closest-side {
    background-image: radial-gradient(circle closest-side, #3498db, #2c3e50);
}
.farthest-side {
    background-image: radial-gradient(circle farthest-side, #3498db, #2c3e50);
}
.closest-corner {
    background-image: radial-gradient(circle closest-corner, #3498db, #2c3e50);
}
.farthest-corner {
    background-image: radial-gradient(circle farthest-corner, #3498db, #2c3e50);
}

/* Explicit size: circle with 100px radius */
.fixed-circle {
    background-image: radial-gradient(circle 100px, #3498db, #2c3e50);
}

/* Explicit size: ellipse with width and height */
.fixed-ellipse {
    background-image: radial-gradient(200px 100px, #3498db, #2c3e50);
    /* 200px wide, 100px tall ellipse */
}

Positioning Radial Gradients

By default, a radial gradient is centered in the element. You can change the origin point using the at keyword followed by position values.

Example: Radial Gradient Positioning

/* Default: centered */
.centered {
    background-image: radial-gradient(circle at center, #3498db, #2c3e50);
}

/* Position keywords */
.top-left {
    background-image: radial-gradient(circle at top left, #f39c12, transparent);
}
.bottom-right {
    background-image: radial-gradient(circle at bottom right, #e74c3c, transparent);
}

/* Percentage positioning */
.offset {
    background-image: radial-gradient(circle at 30% 70%, #3498db, #2c3e50);
}

/* Pixel positioning */
.pixel-pos {
    background-image: radial-gradient(circle at 50px 50px, #f39c12, transparent);
}

/* Decorative corner glow */
.corner-glow {
    background-color: #1a1a2e;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(102, 126, 234, 0.4), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(118, 75, 162, 0.4), transparent 50%);
}

/* Vignette effect (darkened edges) */
.vignette {
    background-image:
        radial-gradient(ellipse at center,
            transparent 50%,
            rgba(0, 0, 0, 0.5) 100%
        );
}
Tip: Radial gradients positioned at corners or edges are excellent for creating subtle decorative effects on cards and sections. A common pattern is layering multiple transparent-to-color radial gradients at different corners to create a soft, colorful background without any image files.

Conic Gradients

A conic gradient creates a color transition that sweeps around a center point, like the hands of a clock. Instead of transitioning along a line (linear) or outward from a point (radial), colors transition around a circle. Conic gradients are perfect for creating pie charts, color wheels, loading spinners, and other circular visual effects.

Basic Conic Gradient Syntax

The syntax is: conic-gradient(from angle at position, color1, color2, ...)

Example: Basic Conic Gradients

/* Default: starts from top (0deg/12 o'clock), centered */
.conic-default {
    background-image: conic-gradient(#3498db, #2ecc71, #e74c3c, #3498db);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* Color wheel */
.color-wheel {
    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%)
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* Simple two-color sweep */
.two-color {
    background-image: conic-gradient(#3498db, #2ecc71);
    border-radius: 50%;
}

Starting Angle and Position

Example: Controlling Conic Gradient Origin

/* Start from a different angle */
.from-angle {
    background-image: conic-gradient(from 90deg, #3498db, #2ecc71, #3498db);
    border-radius: 50%;
}

/* Start from bottom (180deg) */
.from-bottom {
    background-image: conic-gradient(from 180deg, #e74c3c, #f39c12, #e74c3c);
    border-radius: 50%;
}

/* Change center position */
.offset-center {
    background-image: conic-gradient(at 30% 70%, #3498db, #2ecc71, #3498db);
    border-radius: 50%;
}

/* Combine angle and position */
.custom-origin {
    background-image: conic-gradient(from 45deg at 60% 40%,
        #667eea, #764ba2, #667eea
    );
    border-radius: 50%;
}

Creating Pie Charts with Conic Gradients

Conic gradients with hard color stops are the simplest way to create pie charts in pure CSS -- no JavaScript or SVG required.

Example: CSS Pie Charts

/* Simple pie chart: 65% complete */
.pie-chart {
    background-image: conic-gradient(
        #2ecc71 0deg,
        #2ecc71 234deg,    /* 65% of 360deg = 234deg */
        #ecf0f1 234deg,
        #ecf0f1 360deg
    );
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

/* Multi-segment pie chart */
.budget-chart {
    background-image: conic-gradient(
        #3498db 0deg,
        #3498db 126deg,    /* Housing: 35% = 126deg */
        #2ecc71 126deg,
        #2ecc71 198deg,    /* Food: 20% = 72deg */
        #e74c3c 198deg,
        #e74c3c 270deg,    /* Transport: 20% = 72deg */
        #f39c12 270deg,
        #f39c12 324deg,    /* Savings: 15% = 54deg */
        #9b59b6 324deg,
        #9b59b6 360deg     /* Other: 10% = 36deg */
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* Donut chart (pie chart with a hole) */
.donut-chart {
    background-image: conic-gradient(
        #3498db 0%,
        #3498db 40%,
        #2ecc71 40%,
        #2ecc71 70%,
        #e74c3c 70%,
        #e74c3c 100%
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
    position: relative;
}
/* The hole in the donut */
.donut-chart::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
}

/* Pie chart using percentage stops (simpler math) */
.simple-pie {
    background-image: conic-gradient(
        #3498db 0% 35%,    /* Blue: 0% to 35% */
        #2ecc71 35% 60%,   /* Green: 35% to 60% */
        #f39c12 60% 85%,   /* Orange: 60% to 85% */
        #e74c3c 85% 100%   /* Red: 85% to 100% */
    );
    border-radius: 50%;
}
Note: When creating pie charts with conic-gradient, you can use either degree values or percentages for color stops. Percentages are often easier to work with since they map directly to the data (e.g., 35% of the pie = 0% 35%). Degree values require conversion (percentage times 3.6 = degrees).

Repeating Gradients

Each gradient type has a repeating variant: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). These functions work exactly like their non-repeating counterparts, but the gradient pattern repeats to fill the entire element. This is incredibly useful for creating striped patterns, target-like circles, and other repetitive designs.

Example: Repeating Linear Gradients

/* Horizontal stripes */
.horizontal-stripes {
    background-image: repeating-linear-gradient(
        0deg,
        #3498db 0px,
        #3498db 10px,
        #2c3e50 10px,
        #2c3e50 20px
    );
}

/* Diagonal stripes */
.diagonal-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(52, 152, 219, 0.3) 10px,
        rgba(52, 152, 219, 0.3) 20px
    );
}

/* Subtle paper lines */
.lined-paper {
    background-color: #fefefe;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 27px,
        #e8e8e8 27px,
        #e8e8e8 28px
    );
}

/* Warning stripes (hazard tape) */
.hazard-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        #f1c40f,
        #f1c40f 10px,
        #2c3e50 10px,
        #2c3e50 20px
    );
}

Example: Repeating Radial and Conic Gradients

/* Target / bullseye pattern */
.target {
    background-image: repeating-radial-gradient(
        circle,
        #e74c3c 0px,
        #e74c3c 10px,
        #ffffff 10px,
        #ffffff 20px
    );
    border-radius: 50%;
}

/* Concentric circles */
.ripple {
    background-image: repeating-radial-gradient(
        circle at center,
        transparent 0px,
        transparent 8px,
        rgba(52, 152, 219, 0.2) 8px,
        rgba(52, 152, 219, 0.2) 10px
    );
}

/* Starburst pattern */
.starburst {
    background-image: repeating-conic-gradient(
        #3498db 0deg,
        #3498db 10deg,
        #2c3e50 10deg,
        #2c3e50 20deg
    );
    border-radius: 50%;
}

/* Checkerboard with conic gradient */
.checkerboard-conic {
    background-image: repeating-conic-gradient(
        #ccc 0% 25%,
        #fff 0% 50%
    );
    background-size: 40px 40px;
}

Creative Gradient Patterns

By combining multiple gradients, hard stops, and careful sizing, you can create a wide variety of patterns entirely with CSS -- no images needed. These patterns are scalable, customizable, and add zero weight to your page load.

Example: Pure CSS Patterns

/* Checkerboard pattern */
.checkerboard {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

/* Polka dots */
.polka-dots {
    background-color: #2c3e50;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.15) 10%, transparent 11%),
        radial-gradient(circle, rgba(255,255,255,0.15) 10%, transparent 11%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* Grid lines */
.grid {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Zigzag border */
.zigzag {
    background-color: #3498db;
    background-image:
        linear-gradient(135deg, #ffffff 25%, transparent 25%),
        linear-gradient(225deg, #ffffff 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 20px;
}

/* Carbon fiber texture */
.carbon-fiber {
    background-color: #282828;
    background-image:
        radial-gradient(circle, #333 1px, transparent 1px),
        radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}
Tip: When creating gradient patterns, the background-size property controls the tile size, and background-position controls the offset of each layer. Adjusting these values lets you create offset patterns like polka dots and checkerboards where alternating rows are shifted.

Gradient Text with background-clip

One of the most visually striking CSS effects is filling text with a gradient. This technique uses background-clip: text to clip the gradient to the shape of the text characters, and then makes the text color transparent so the gradient shows through.

Example: Gradient Text Effects

/* Basic gradient text */
.gradient-text {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 3rem;
    font-weight: 800;
}

/* Rainbow gradient text */
.rainbow-text {
    background-image: linear-gradient(to right,
        #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Animated gradient text */
.animated-gradient-text {
    background-image: linear-gradient(90deg,
        #667eea, #764ba2, #f093fb, #667eea
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 4s ease infinite;
    font-size: 3rem;
    font-weight: 800;
}

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

/* Metallic / gold text */
.gold-text {
    background-image: linear-gradient(
        to bottom,
        #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    font-weight: 700;
}
Warning: Always include the -webkit-background-clip: text prefix alongside the standard background-clip: text for maximum browser compatibility. Also include a solid color value as a fallback for browsers that do not support background-clip text -- the transparent text would be invisible without the gradient, so the fallback ensures text remains readable.

Gradient Borders

CSS does not support gradients directly in the border property, but there are several techniques to create gradient border effects. The most common approaches use border-image or a background gradient with padding.

Example: Gradient Borders

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

/* Method 2: Background gradient with padding */
.gradient-border-2 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 3px; /* This becomes the border width */
}
.gradient-border-2-inner {
    background: white;
    padding: 1.5rem;
}

/* Method 3: Rounded gradient border using pseudo-element */
.gradient-border-rounded {
    position: relative;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
}
.gradient-border-rounded::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 14px; /* Slightly larger than the element */
    z-index: -1;
}

/* Gradient border on hover */
.hover-gradient-border {
    border: 3px solid #ddd;
    border-image: none;
    padding: 1.5rem;
    transition: border-color 0.3s;
}
.hover-gradient-border:hover {
    border: 3px solid;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}
Note: The border-image approach does not work with border-radius -- the gradient border will appear as sharp corners even if you set a border-radius. For rounded gradient borders, you must use the pseudo-element technique (Method 3) or the background padding technique (Method 2) with border-radius applied to both the outer and inner elements.

Gradient Overlays on Images

One of the most practical uses of gradients is layering them over background images to improve text readability, add color tints, or create fade-out effects. This is achieved by stacking a gradient on top of a background image using multiple backgrounds.

Example: Gradient Overlays

/* Dark overlay for text readability */
.hero-dark {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem;
}

/* Color tint overlay */
.hero-tinted {
    background-image:
        linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)),
        url('hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}

/* Bottom fade for text over image */
.card-image {
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%),
        url('card-photo.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    color: white;
    min-height: 300px;
}

/* Side fade effect */
.side-fade {
    background-image:
        linear-gradient(to right, #ffffff 0%, transparent 30%, transparent 70%, #ffffff 100%),
        url('wide-photo.jpg');
    background-size: cover;
    background-position: center;
}

/* Radial spotlight over image */
.spotlight-image {
    background-image:
        radial-gradient(circle at 50% 40%,
            transparent 20%,
            rgba(0, 0, 0, 0.6) 80%
        ),
        url('portrait.jpg');
    background-size: cover;
    background-position: center;
}

/* Duotone effect */
.duotone {
    background-image:
        linear-gradient(rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
        url('photo.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

Practical Gradient Examples

Let us put everything together with real-world examples you can use directly in your projects.

Example: Modern UI Components with Gradients

/* Gradient button */
.btn-gradient {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Gradient card header */
.card-header-gradient {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
    color: white;
}

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

/* Gradient background with noise texture */
.gradient-hero {
    background-color: #1a1a2e;
    background-image:
        linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading skeleton with animated gradient */
.skeleton {
    background-color: #e0e0e0;
    background-image: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 50%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mesh gradient (approximation) */
.mesh-gradient {
    background-color: #ff6b6b;
    background-image:
        radial-gradient(at 40% 20%, #ff6b6b 0%, transparent 50%),
        radial-gradient(at 80% 0%, #feca57 0%, transparent 50%),
        radial-gradient(at 0% 50%, #48dbfb 0%, transparent 50%),
        radial-gradient(at 80% 50%, #ff9ff3 0%, transparent 50%),
        radial-gradient(at 0% 100%, #a29bfe 0%, transparent 50%),
        radial-gradient(at 80% 100%, #ffeaa7 0%, transparent 50%);
}

Example: Gradient Utilities

/* Reusable gradient custom properties */
:root {
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-dark: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Apply gradients */
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-success { background-image: var(--gradient-success); }
.bg-gradient-danger  { background-image: var(--gradient-danger); }
.bg-gradient-warning { background-image: var(--gradient-warning); }
.bg-gradient-dark    { background-image: var(--gradient-dark); }
.bg-gradient-sunset  { background-image: var(--gradient-sunset); }

/* Gradient text utilities */
.text-gradient-primary {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-sunset {
    background-image: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

Exercise 1: Gradient Button Set

Create a set of four gradient buttons with these specifications:

  1. A primary button with a 135-degree gradient from blue (#667eea) to purple (#764ba2).
  2. A success button with a gradient from teal (#11998e) to green (#38ef7d).
  3. A danger button with a gradient from dark red (#eb3349) to orange-red (#f45c43).
  4. All buttons should have a hover effect that lifts the button (translateY) and adds a colored box-shadow matching the gradient.

Exercise 2: CSS Pie Chart

Create a pie chart using conic-gradient that shows the following data:

  1. HTML: 30% (blue #3498db)
  2. CSS: 25% (green #2ecc71)
  3. JavaScript: 35% (yellow #f1c40f)
  4. Other: 10% (gray #95a5a6)
  5. Make it a donut chart by adding a white circle in the center using a pseudo-element.

Exercise 3: Hero Section with Gradient Overlay

Build a hero section with these requirements:

  1. A background image with a colored gradient overlay using multiple backgrounds.
  2. The gradient should go from a semi-transparent dark blue on the left to a semi-transparent purple on the right.
  3. White text should be clearly readable over the overlay.
  4. A gradient heading that uses background-clip text for an eye-catching rainbow or metallic effect.
  5. A gradient divider line below the subtitle that fades from transparent to the brand color and back to transparent.

Exercise 4: Gradient Patterns

Create three different gradient patterns:

  1. Diagonal warning stripes using repeating-linear-gradient with yellow and black colors at 45 degrees.
  2. A polka dot pattern using two offset radial-gradient layers on a dark background.
  3. A checkerboard pattern using four linear-gradient layers at 45 and -45 degrees with appropriate background-size and background-position to create the offset grid.
Previous Lesson Backgrounds: Color, Image, Size, Position
Next Lesson Borders, Border-Radius & Outlines
Back to Course

ES
Edrees Salih
23 hours ago

We are still cooking the magic in the way!