CSS Effects

CSS Gradients

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.

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>

Output

Browser Output

css

The first box will display a blue linear gradient from left to right
The second box will display a yellow-to-orange radial gradient
Both boxes will have smooth color transitions without using images

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

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