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);
}

PreviousCSS Shadows NextCSS Filters

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%

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>

CSS Gradients

Syntax

Attributes

Example

Browser Support

Notes

Three-Color Gradient

Directional Gradient

Angle-Based Gradient

Radial Gradient

Conclusion