upgrad-logo
IIT/IIM Courses

CSS Gradients Explained: A Simple Guide for Responsive Web Design

Updated on 02/09/20252,826 Views
Table of Content

Introduction

Want to add depth and vibrant color to your web pages? Go beyond flat, single-color backgrounds with CSS Gradients.  

This powerful CSS feature allows you to create beautiful, smooth transitions between two or more colors directly in your code, no images required. In this tutorial, we’ll explore the different types of CSS Gradients, from straight lines (linear) to circles (radial), and show you how to master them with practical, hands-on examples. 

Ready to move beyond the fundamentals and build stunning, modern websites? Explore upGrad’s Software Engineering Courses to master advanced CSS, JavaScript, and the complete front-end development ecosystem with hands-on projects.

Overview

CSS gradients enable you to create smooth color transitions between two or more colors rather than using a single solid color. Gradients are excellent for giving your website design visual depth and richness since they create dynamic backgrounds, buttons, or other elements.

Backgrounds, buttons, and borders are just a few of the items on your website that can be decorated with CSS gradients. Gradients can be customized with various color stops and placements and offer visual attractiveness. They provide a strong technique to improve your site design and produce interesting user experiences and are extensively supported by contemporary browsers.

What Are CSS Gradients?

Instead of utilizing a single solid color, CSS gradients let you make seamless color transitions between two or more colors. As they produce dynamic backdrops, buttons, or other items, gradients are great for adding visual depth and richness to your website design.

Ready to move beyond development and unlock new career opportunities? We've curated these forward-looking courses specifically to enhance your professional growth: 

  • Professional Certificate Program in Cloud Computing and DevOps 
  • AI-Powered Full Stack Development Course by IIITB 
  • Master of Design in User Experience

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #gradient {
        background-image: linear-gradient(red, green, blue, white);
        height: 200px;
        width: 320px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="gradient">Linear gradient for 4 colors from top to bottom</div>
  </body>
</html>

Why Use CSS Gradients?

Web designers frequently choose CSS gradients because of their many advantages and practical applications. The following are some justifications for employing CSS gradients:

  • Visual Appeal: Gradients give your website design depth and dimension, which makes it more eye-catching and compelling. They can provide interest and attention to an otherwise plain background or component.
  • Smooth Colour Transitions: Gradients let you switch between two or more colors smoothly rather than using a solid color. This result can produce a more aesthetically pleasant and natural visual experience.
  • Reduced Reliance on Photos: In the past, designers frequently utilized photos to create gradient effects, lengthening the time it took for a page to load. Instead of utilizing external image files, CSS gradients can be used to generate comparable effects, hastening website load times and lowering server requests.
  • Scalability: CSS gradients are flexible and independent of resolution. They ensure a unified look across numerous devices by adapting to various screen sizes and resolutions.
  • Performance Enhancement: Because CSS gradients are compact, they improve overall performance. Gradients don't need additional HTTP requests like images do, which speeds up website rendering.

Also Read: Top 70+ CSS Interview Questions & Answers for All Experience Levels for 2025

Types of CSS Gradients

In this portion of the tutorial, we will discuss the different types of gradients in CSS through examples.

Linear gradient

The most typical kind of gradient is a linear gradient. The gradient axis can be adjusted to run vertically, horizontally, diagonally, or at any other angle.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #gradient {
        background-image: linear-gradient(green, lightgreen, white);
        height: 200px;
        width: 320px;
        color: #b2ffff;
      }
    </style>
  </head>
  <body>
    <div id="gradient">Linear Gradient</div>
  </body>
</html>

Straight-line color transitions are produced by linear gradients. Use the terms "to top," "to bottom," "to right," "to left," "to top right," etc. to describe the gradient's direction or enter an angle (in degrees) instead.

Also Read: CSS vs CSS3: Understand the Difference Between CSS and CSS3

Radial Gradient

An ellipse or circular-shaped radial gradient is a sort of CSS gradient that produces a seamless color transition from a center point outward. The defined shape's edges are covered with colors that radiate outward from the center. The creation of round or rounded components with multiple color variations makes use of radial gradients particularly well.

Syntax: background-image: radial-gradient(shape size at position, start-color, transitioning colors, ..., last-color);

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #radialgradient {
        background-image: -webkit-radial-gradient(white,blue); /*For Safari & Chrome 10+*/
        background-image: -o-radial-gradient(white, yellow); /*For Opera */
        background-image: -moz-radial-gradient(white,blue); /*For Firefox */
        background-image: radial-gradient( white, yellow); /*Standard Syntax*/
        height: 400px;
        width: 450px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="radialgradient"><h2>Radial Gradient</h2></div>
  </body>
</html>

The Different Types of Linear Gradients

Here, we will discuss different types of linear gradients with the help of examples.

Linear Gradient (Top to Bottom)

You can use the linear-gradient() function keyword to produce a linear gradient that flows smoothly from the top to the bottom of an element. This will guarantee that the gradient runs vertically through the element, from top to bottom.

Syntax:  background-image: linear-gradient(red, white);

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#linear-top-bottom-grad {  
    height: 400px;  
    width: 550px;
    background: -webkit-linear-gradient(blue, lightred); /* For Safari*/  
    background: -o-linear-gradient(blue, lightred); /* For Opera 11.1*/  
    background: -moz-linear-gradient(blue, lightred); /* For Firefox */  
    background: linear-gradient(blue, lightgreen); /* Standard syntax */  
}  
</style>  
</head>  
<body>  
<h3>Linear Gradient - Top to Bottom</h3>  
<p>This linear gradient starts at the top. It starts as blue, then transitions to light green:</p>  
<div id="linear-top-bottom-grad"></div>  
</body>  
</html>  

Also Read: 15 Amazing CSS Project Ideas Every Beginner Must Try in 2025!

Linear Gradient (Left to Right)

You can use the linear-gradient(to right,.....) function keyword to produce a linear gradient that flows smoothly from the left to right of an element. This will guarantee that the gradient runs horizontally through the element, from left to right.

Syntax:  background-image: linear-gradient(to right,red, white);

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#linear-left-right-grad {  
    height: 400px;
    width: 550px;
    background: -webkit-linear-gradient(left, lightgreen, green); /* For Safari*/  
    background: -o-linear-gradient(right, lightgreen, green); /* For Opera*/  
    background: -moz-linear-gradient(right, lightgreen, green); /* For Firefox*/  
    background: linear-gradient(to right, lightgreen , green); /* General syntax*/  
}  
</style>  
</head>  
<body>  
<h3>Linear Gradient - Left to Right</h3>  
<p>This linear gradient starts at the left. It starts as lightgreen, and then transitions to green:</p>  
<div id="linear-left-right-grad"></div>  
</body>  
</html>  

Linear Gradient (Diagonal)

You can use the linear-gradient(to bottom right,.....) function keyword to produce a linear gradient that flows smoothly from the top left to the bottom right of an element. This will guarantee that the gradient runs diagonally through the element, from left to right.

Syntax: background-image: linear-gradient(to bottom right,red, white);

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#linear-diagonal-grad {  
    height: 400px;
    width: 550px;
    background: -webkit-linear-gradient(left top, red , purple); /* For Safari */  
    background: -o-linear-gradient(bottom right, red, purple); /* For Opera */  
    background: -moz-linear-gradient(bottom right, red, purple); /* For Firefox */  
    background: linear-gradient(to bottom right, red , purple); /* General syntax */  
}  
</style>  
</head>  
<body>  
<h3>Linear Gradient - Diagonal</h3>  
<p>This linear gradient starts at top left. It starts out as red, then transitions to purple:</p>  
<div id="linear-diagonal-grad"></div>  
</body>  
</html>  

The Different Types of Radial Gradients

Here, we will discuss the different types of radial CSS gradients with the help of examples.

CSS Radial-Gradient(Evenly Spaced Color Stops)

Radial gradients with evenly spaced color stops are the default CSS radial gradient. Using the necessary parameters, the radial-gradient() method can be used to produce a radial gradient in CSS. A circular or elliptical-shaped radial gradient produces a seamless color shift from a center point outward.

Syntax: background: radial-gradient(color1,.....);

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#radial-grad {  
    height: 400px;  
    width: 550px;  
    background: -webkit-radial-gradient(blue, lightblue, violet); /* Safari */  
    background: -o-radial-gradient(blue, lightblue, violet); /* For Opera */  
    background: -moz-radial-gradient(blue, lightblue, violet); /* For Firefox */  
    background: radial-gradient(blue, lightblue, violet); /* General syntax */  
}  
</style>  
</head>  
<body>  
<h3>Default Radial Gradient - Evenly Spaced Color Stops with blue, lightblue ,and violet</h3>  
<div id="radial-grad"></div>  
</body>  
</html>  

Also Read: What is Responsive Web Design

CSS Radial-Gradient(Differently Spaced Color Stops)

Using the necessary parameters, the radial-gradient(color1%,color2%,..) method can be used to produce a radial gradient with differently spaced color stops in CSS. A circular or elliptical-shaped radial gradient produces a seamless color shift from a center point outward.

Syntax: background: radial-gradient(blue 5%, violet 15%, red 60%);

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#differently-spaced-radial-grad {  
    height: 400px;  
    width: 550px;  
    background: -webkit-radial-gradient(blue 5%, violet 15%, red 60%); /* For Safari */  
    background: -o-radial-gradient(blue 5%, violet 15%, red 60%); /* For Opera */  
    background: -moz-radial-gradient(blue 5%, violet 15%, red 60%); /* For Firefox */  
    background: radial-gradient(blue 5%, violet 15%, red 60%); /* General syntax */  
}  
</style>  
</head>  
<body>  
<h3>Default Radial Gradient - Differently Spaced Color Stops with blue, violet ,and red</h3>  
<div id="differently-spaced-radial-grad"></div>  
</body>  
</html>

CSS Gradients and Supporting Browsers

CSS gradients are widely supported in contemporary web browsers as of my most recent update in September 2021. CSS gradients are completely supported by all popular browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera. The support features radial and linear gradients.

The supported browser versions are listed below:

  • Google Chrome: Chrome versions 1.0 and higher support CSS gradients.
  • Mozilla Firefox: Firefox versions 3.6 and higher support CSS gradients.
  • Apple Safari: Versions 4.0 and up of Safari enable CSS gradients.
  • Microsoft Edge: Versions 10 and up of Edge enable CSS gradients.
  • Opera: Versions 11.1 and up of Opera enable CSS gradients.

Remember that CSS gradients are frequently used, and if you need to support legacy systems, it's a good idea to verify compatibility with earlier browser versions. However, you don't need to worry too much about browser support when using CSS gradients in the majority of web development cases.

Done with CSS? Check out this free course on JavaScript Basics from Scratch

Conclusion

In conclusion, CSS Gradients are a powerful and efficient tool for adding vibrant, dynamic color to your web designs without needing to slow down your site with image files. 

You now have the skills to create beautiful linear-gradient and radial-gradient effects that can make your websites more modern and visually engaging. The best way to master CSS Gradients is to experiment, so get creative and start adding some colorful transitions to your projects!

FAQs

1. Can we make gradients that repeat?

The repeating-linear-gradient() or repeating-radial-gradient() functions can be used to make repeated gradients. You can duplicate the gradient design with ease using these. How do I manipulate the gradient's position and direction?

2. How do I manipulate the gradient's position and direction?

A linear gradient can have its direction changed by using angles or verbs like "to top," "to bottom," etc. You can use “at position” to specify the position for radial gradients. Example:” to right”,” circle at center”,”45deg”. How can we use linear gradient in mobile app development?

3. How can we use linear gradient in mobile app development?

We can use linear gradient in react native as a component to perform this in mobile app development.

FREE COURSES

Start Learning For Free

Slide 1 of 5
Object-Oriented Principles in Java
Object-Oriented Principles in Java

13k+ learners

12 hrs of learning

Data Structures & Algorithm
Data Structures & Algorithm

35k+ learners

50 hrs of learning

Core Java Basics
Core Java Basics

14k+ learners

23 hrs of learning

Case Study using Tableau, Python and SQL
Case Study using Tableau, Python and SQL

11k+ learners

10 hrs of learning

Learn Basic Python Programming
Learn Basic Python Programming

43k+ learners

5 hrs of learning

Explore All Free Courses
image
Pavan Vadapalli

Author|911 articles published

Pavan Vadapalli is the Director of Engineering , bringing over 18 years of experience in software engineering, technology leadership, and startup innovation. Holding a B.Tech and an MBA from the India....

image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
advertise-arrow

Top Resources

Recommended Programs

Slide 1 of 1
LJMU

popular

Liverpool John Moores University

Master of Science in Machine Learning & AI

Double Credentials

Master's Degree

18 Months

Free Courses

Explore Our Free Software Tutorials

Slide 1 of 3
Java free Courses

Free Certificate

Object-Oriented Principles in Java

In this course, learn about the framework of classes and objects, and get introduced to the principles of OOP - Abstraction, Encapsulation, Inheritance and Polymorphism.

17 Courses

image

Free Certificate

Data Structures and Algorithm

This course focuses on building your problem-solving skills to ace your technical interviews and excel as a Software Engineer. In this course, you will learn time complexity analysis, basic data structures like Arrays, Queues, Stacks, and algorithms such as Sorting and Searching.

50 Courses

image

Free Certificate

Core Java Basics

In this course, you will learn the concept of variables and the various data types that exist in Java. You will get introduced to Conditional statements, Loops and Functions in Java.

17 Courses

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 10 AM to 7 PM

text

Indian Nationals

text

Foreign Nationals