CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.
Types of Gradients
The Gradients can be categorized into 3 types:
- Linear Gradients
- Radial Gradients
- Conic Gradients
Here we are going to study each property one by one.
1. Linear Gradients
Linear gradients involve smooth color transitions that can go up, down, left, right, or diagonally. You need at least two colors to create a linear gradient, but you can include more for complex effects. The starting point and direction are essential for the gradient effect.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
The linear-gradient can be implemented in the following ways:
1. Top to Bottom:
In this image, the transition started with white color and ended with green color. On exchanging the color sequence, the transition will start with green and will end with white.
Example: This example illustrates the linear-gradient that starts from the top & ends at the bottom, initiating from the white color, transitioning to the green color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(white, green);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
2. Left to Right:
In this image, the transition started from left to right. It starts from white transitioning to green.
Example: This example illustrates the linear-gradient that starts from the left & ends at the right.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to right, white, green);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
3. Diagonal:
This transition started from top-left to bottom-right. It starts with the green transition to white. For the diagonal gradient, need to specify both horizontal and vertical starting positions.
Example: This example illustrates the linear-gradient with the diagonal transition by specifying both the horizontal and vertical starting positions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to bottom right,
green, rgba(183, 223, 182, 0.4));
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
4. Repeating Linear Gradient:
CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The image here contains 3 colors in each transition with some percentage value.
Example: This example illustrates the linear-gradient with repeating transition effects by implementing the multicolors.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(#090,
#fff 10%, #2a4f32 20%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
5. Angles on Linear Gradients:
CSS allows the user to implement directions in Linear Gradients rather than restricting themselves to predefined directions.
Example: This example illustrates the linear-gradient by implementing the direction on linear gradients.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(-45deg, #090,
#2a4f32 10%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
2. CSS Radial Gradients:
Radial gradients start from a central point and radiate outward. By default, they form an elliptical shape, starting from the center and fading towards the edges.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
The radial-gradient can be implemented in the following ways:
1. Radial Gradient - evenly spaced color stops:
In CSS, by default, the fade happens at an equal rate. The following figure shows the Radial Gradient with even color stops.
Color stops: Color stops inform the browsers that what color to use, at the starting point of the gradient & where to stop. By default, they are equally spaced but we can overrule it by providing the specific color stops.
Example: This example illustrates the radial-gradient having evenly spaced color stops.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 700px;
background-color: white;
background-image: radial-gradient(#090,
#fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
2. Radial Gradient- unevenly spaced color stops:
CSS allows the user to have variation in spacing of color stops while applying the radial-gradient feature.
Example: This example illustrates the radial-gradient having unevenly spaced color stops.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 100%;
background-color: white;
background-image: radial-gradient(#090
40%, #fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
3. CSS Conic Gradients:
Unlike radial gradients, a conic gradient is defined by colors that transition in a circular pattern and rotate around a central point to complete a 360-degree rotation. By default, the central point will be positioned at the center of the container (50%, 50%). Similar to linear gradients, conic gradients can be rotated by defining an angle value.
Syntax:
background-image: conic-gradient(from angle at position, start-color, ..., last-color);
The conic-gradient can be implemented in the following ways:
1. Angles on Conic Gradients:
CSS allows the user to implement the rotation (in clockwise direction) of conic gradients.
Example: This example illustrates a conic gradient with a 45 degrees rotation, where the coordinates (x, y) of the central point are respectively 50% and 50% of the container's dimensions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 100%;
background-color: white;
background-image: conic-gradient(from 45deg at 50% 50%, #090, #fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
2. Repeating Conic Gradient:
CSS also allows the user to implement multiple conic gradients using the repeating-conic-gradient() function.
Example: This example illustrates the previous conic-gradient repeated fives times.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 100%;
background-color: white;
background-image: repeating-conic-gradient(from 45deg at 50% 50%, #009900ff 0%, #ffffffff 10%, #2a4f32ff 20%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
Overlaying Gradients
You can add multiple gradients within a single background and adjust color transparency to create more advanced effects. Since designing these gradients can be tricky, using a CSS gradient editor can make the design process easier.
Example: This example illustrates three stacked gradients: a repeating conic gradient on top, followed by a linear gradient, and a radial gradient at the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 100%;
background-color: white;
background-image:
repeating-conic-gradient(from 0deg at 50% 50%, #008a9933 0% 12.5%, #ffffff33 12.5%, #2a445133 25%),
linear-gradient(360deg, #9936004d 0% 50%, #ffffff4d 100%),
radial-gradient(circle farthest-corner at 50% 50%, #009900ff 0% 50%, #ffffffff 50%, #2a4f32ff 100%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
CSS gradients are used for creating visually appealing web elements. This article covered linear, radial, and conic gradients, along with practical examples and their implementation.
Supported Browser
Here are the browsers that support CSS gradients:
Note: CSS gradients are supported in most modern browsers, but older versions, especially of Internet Explorer, may have limited or no support for certain gradient types. Always test your design for compatibility.
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read