CSS Effects

CSS Gradients

Written by Swapnil RajaUpdated 30 Jul 2026

CSS Gradients are used to create smooth transitions between two or more colors without using images.

Gradients are commonly used for:

Website backgrounds
Buttons
Cards
Hero sections
Modern UI designs

Because gradients are generated by CSS, they load faster than image-based backgrounds and scale perfectly on all screen sizes. The supporting concepts are explained in CSS Colors and Modern Colors.

CSS provides two main gradient types:

Linear Gradient
Radial Gradient

Syntax

Linear Gradient

Linear Gradient Syntax

css

selector {
    background: linear-gradient(color1, color2);
}

Linear Gradient Example

css

div {
    background: linear-gradient(red, blue);
}

Creates a gradient from red to blue.

Radial Gradient

Radial Gradient Syntax

css

selector {
    background: radial-gradient(color1, color2);
}

Radial Gradient Example

css

div {
    background: radial-gradient(yellow, orange);
}

Creates a circular gradient effect.

Attributes

Function	Description	Example
linear-gradient()	Creates a linear color transition	linear-gradient(red, blue)
radial-gradient()	Creates a circular gradient	radial-gradient(yellow, orange)
repeating-linear-gradient()	Repeats a linear gradient	repeating-linear-gradient(red, blue 20px)
repeating-radial-gradient()	Repeats a radial gradient	repeating-radial-gradient(red, blue 20px)
color stops	Defines transition points	red 20%, blue 80%

Example

CSS Gradients Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients Example</title>
    <style>
        .linear-box {
            width: 300px;
            height: 150px;
            background: linear-gradient(to right, #007acc, #00c6ff);
            margin-bottom: 20px;
        }
        .radial-box {
            width: 300px;
            height: 150px;
            background: radial-gradient(circle, yellow, orange);
        }
    </style>
</head>
<body>
    <div class="linear-box"></div>
    <div class="radial-box"></div>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
linear-gradient()	26	12	16	7

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Gradients are commonly used as background images.
Multiple colors can be added to a gradient.
Gradients reduce the need for image files.
Direction can be specified using to right, to left, to top, to bottom, and angle values such as 45deg.

Three-Color Gradient

css

background: linear-gradient(
    red,
    yellow,
    blue
);

Directional Gradient

css

background: linear-gradient(
    to right,
    purple,
    pink
);

Angle-Based Gradient

css

background: linear-gradient(
    45deg,
    #007acc,
    #00ffcc
);

Radial Gradient

css

background: radial-gradient(
    circle,
    white,
    blue
);

Conclusion

CSS Gradients provide a powerful way to create modern, colorful, and visually appealing backgrounds without using images. By combining colors, directions, and gradient types, you can design professional interfaces that are lightweight, responsive, and easy to maintain.

PreviousCSS Shadows NextCSS Filters