CSS Gradients

A gradient is a smooth transition between two or more colors. CSS provides different types of gradients that can be used directly as background images.

Why Use CSS Gradients?

• Create attractive backgrounds.
• Reduce the need for image files.
• Improve website performance.
• Create modern UI designs.
• Easy to customize using CSS.

.box{

    background:linear-gradient(red, blue);

}

A linear gradient creates a gradual color transition in a straight line.

.box{

    background:linear-gradient(red, yellow);

}

.box{

    background:linear-gradient(to right,
    blue, cyan);

}

A radial gradient starts from the center and spreads outward in a circular or elliptical shape.

.box{

    background:radial-gradient(red,
    yellow, green);

}

.circle{

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

}

A conic gradient creates color transitions around a center point in a circular pattern.

.box{

    background:conic-gradient(red,
    yellow, green, blue);

}

.chart{

    background:conic-gradient(
    red 25%,
    yellow 25% 50%,
    green 50% 75%,
    blue 75%
    );

}

You can control the direction of a gradient using keywords such as to right, to left, or by specifying an angle in degrees.

.box{

    background:linear-gradient(
    to right,
    red,
    orange
    );

}

.box{

    background:linear-gradient(
    45deg,
    purple,
    pink
    );

}

CSS gradients allow you to use multiple color stops to create smooth and colorful transitions between several colors.

.box{

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

}

.box{

    background:linear-gradient(
    red 10%,
    yellow 40%,
    green 70%,
    blue 100%
    );

}

CSS provides repeating gradients that automatically repeat the gradient pattern across the element.

.box{

    background:repeating-linear-gradient(

    red 0px,

    yellow 20px,

    blue 40px

    );

}

.circle{

    background:repeating-radial-gradient(

    red,

    yellow 15%,

    green 30%

    );

}

Example 1 : Button Background

button{

    background:linear-gradient(

    #2196F3,

    #0D47A1

    );

}

Example 2 : Hero Section

.hero{

    background:linear-gradient(

    to right,

    purple,

    pink

    );

}

Example 3 : Circular Background

.circle{

    background:radial-gradient(

    white,

    blue

    );

}

Example 4 : Pie Chart

.chart{

    background:conic-gradient(

    red,

    yellow,

    green,

    blue

    );

}

• No image files are required.
• Improves website loading speed.
• Creates attractive backgrounds.
• Fully responsive on all screen sizes.
• Easy to customize using CSS.
• Supports multiple colors and directions.
• Works well with animations and transitions.

.box{

    background:linear-gradient(

    45deg,

    #ff6b6b,

    #4ecdc4,

    #1a73e8

    );

}

Following best practices helps create attractive, readable, and professional gradient designs.

• Use gradients with complementary colors.
• Avoid using too many bright colors together.
• Maintain sufficient contrast for text readability.
• Use gradients to enhance the design, not distract users.
• Keep gradient directions consistent throughout the website.
• Test gradients on different screen sizes.
• Combine gradients with shadows and animations carefully.
• Use subtle gradients for professional websites.

❌ Poor Design

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

✔ Better Design

background:linear-gradient(
#4facfe,
#00f2fe
);

CSS gradients are supported by all major modern browsers.

1. What is a CSS gradient?
2. What are the different types of CSS gradients?
3. What is the syntax of linear-gradient()?
4. How is a radial gradient different from a linear gradient?
5. What is a conic gradient used for?
6. What are color stops in gradients?
7. What are repeating gradients?
8. Can gradients replace background images?
9. How do you specify the direction of a gradient?
10. Are CSS gradients supported in modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Gradients.
• ✔ Linear Gradients.
• ✔ Radial Gradients.
• ✔ Conic Gradients.
• ✔ Gradient Directions and Angles.
• ✔ Multiple Color Stops.
• ✔ Repeating Gradients.
• ✔ Practical Examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.