For working professionals
For fresh graduates
Study abroad
More

CSS Gradient

Updated on 03/03/20242,447 Views

Table of Content

Introduction

The presentation and layout of HTML documents are managed using the stylesheet language known as CSS (Cascading Style Sheets). Making online sites aesthetically pleasing and user-friendly, CSS enables web developers to apply styles (such as colors, fonts, spacing, and positioning) to HTML elements. CSS gradients are used to make smooth color transitions making the website more appealing. In this tutorial, we will learn about the different types of CSS gradients using practical examples.

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.

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.

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.

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>

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>

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.

Conclusion

Overall, CSS gradients provide a potent and effective method of including aesthetically pleasing color effects in your website design without the requirement for additional picture resources. You may design cutting-edge, aesthetically beautiful websites that engage your audience by understanding the use of gradients.

FAQs

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?

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?

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

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.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918068792934

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.