What is Gradient?
The term "CSS gradient" describes a Cascading Style Sheets (CSS) method that enables seamless transitions between two or more colors. It enables you to add a gradient effect to different CSS properties, including text, borders, and backgrounds.
With CSS gradients, you have the ability to define a smooth transition between colors either in a circular or elliptical pattern (radial-gradient) or along a particular direction. This transition is determined by specifying a minimum of two color stops, indicating the colors that will blend into each other.
For Example:
An example of a linear gradient transitioning from blue to green is depicted here:
.gradient-example {
background: linear-gradient(to right, blue, green);
}
The 'to right' keyword is employed in this example to indicate the direction of the gradient within the linear-gradient function. The colors "Blue" and "Green" mark the starting and ending points of the gradient.
Moreover, you have the option to define additional color stops in order to generate more complex gradients.
Illustration
A visual representation of a radial gradient featuring three color stops is depicted below:
.gradient-example {
background: radial-gradient(circle, red, yellow, green);
}
In this case, a circular gradient is generated by employing the radial-gradient function. The colors "red," "yellow," and "green" represent the color stops, with the term "circle" indicating the shape of the gradient.
You have the ability to produce a range of visual effects and transitions by modifying the direction, shape, and color stops of CSS gradients. These are a powerful resource for designing visually appealing websites since they are well-supported by modern web browsers.
Why We Use Gradient in CSS?
With the help of gradient, we can design a website even better. Some of the main reasons for using CSS gradients are:
- Visual Appeal: Gradients can improve a website or web application's visual appeal. They enable you to add depth to elements and create seamless color transitions, which enhances their visual appeal.
- Backgrounds: To produce captivating and lively background effects, gradients are frequently used. With the help of gradients, we can change the look and feel of a website, even if it is a subtle gradient that adds a touch of smoothness or a vibrant gradient to attract people.
- Buttons and Icons: You can use gradients to give buttons and icons a glossy, three-dimensional look that stands out and encourages user interaction.
- Text Effects: You can make catchy headings, titles, or other special effects by applying gradients to the text. Gradients can enhance the text's visual appeal and attention-grabbing qualities by adding depth, casting shadows, or highlighting particular passages.
- Overlay and masks: Gradients can be used as overlays or masks to combine different images or design elements seamlessly. This method is frequently applied to create visually appealing transitions or effects in image sliders, banners, or hero sections.
- Branding and theming: Gradients can play an important role in a brand's visual identity. You can achieve a unified and consistent look across the entire website by using gradients that complement a brand's color scheme, strengthening the brand's identity.
- Responsive design: Gradients are suitable for responsive design because they can adjust to various screen sizes and orientations. To ensure a consistent visual experience across devices, they can offer fluid color transitions that adjust by the available space.
In general, CSS gradients provide a wide range of creative possibilities for web designers, allowing them to incorporate depth, dimension, and visual intrigue into their designs. They play a crucial role in crafting unique and aesthetically pleasing user interfaces that enhance the overall web browsing experience.
Example
An HTML code demonstrating the application of CSS gradients for background and text styling is presented below as an illustration:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-background {
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
}
.gradient-text {
font-size: 24px;
background: linear-gradient(to right, #ff0000, #00ff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="gradient-background"></div>
<h1 class="gradient-text">Hello, CSS Gradient!</h1>
</body>
</html>
Explanation:
The CSS classes gradient-background and gradient-text are employed in this illustration. The div element with the gradient-background class features a horizontal gradient transitioning from red to green, achieved through the implementation of a linear gradient background.
The gradient-text class adds a linear gradient background and a distinctive text effect to an h1 heading. By setting the -webkit-text-fill-color to text and -webkit-background-clip to transparent, the text turns see-through, allowing the gradient background to shine through. This results in text that appears filled with a gradient.
Types of Gradient in CSS
There are two types of gradients in CSS:
1. Linear Gradient
In CSS, a linear gradient generates a smooth transition of colors along a specified axis. Below is a code snippet illustrating how to implement a linear gradient and the syntax associated with it:
The following syntax:
linear-gradient([angle], color-stop1, color-stop2,...)
- [angle]: Indicates the gradient line's direction. Degrees (deg) or keywords like to top, bottom, left, right, etc., can be used to specify it.
- Color-stops 1, 2, and so forth: Specify the colors and where they should be placed along the gradient line.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient function. The gradient shifts from red (#ff0000) on the left to green (#00ff00) on the right.
Output:
Example 2:
Here is an instance of an HTML code that implements a vertical linear gradient as the background:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
background: linear-gradient(to bottom, #ff0000, #00ff00);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
Applying a linear gradient background to the element assigned the gradient-example class, and defining its height as 200 pixels can be achieved through the implementation of the linear-gradient function. The gradient smoothly shifts from a red color (#ff0000) at the top to a green hue (#00ff00) at the bottom, as specified by the keyword 'bottom'.
Output:
Example 3:
Here is a sample HTML code that applies a linear gradient from right to left as the background:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
background: linear-gradient(to left, #ff0000, #00ff00);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
This illustration demonstrates the application of a linear gradient background to the element assigned the gradient-example class, adjusting its height to 200 pixels through the application of the linear-gradient function. The gradient originates as red (#ff0000) on the right side, smoothly shifting to green (#00ff00) on the left, as specified by the top left keyword.
Output:
2. Radial Gradient
A circular or oval radial gradient smoothly shifts colors, creating a continuous transition that radiates from the center.
Radial-gradient([shape], color-stop1 and color-stop2]) is the syntax.
- [shape]: Specifies the gradient's shape. Circle, ellipse, nearest, closest-corner, farthest-side, and farthest-corner are all possible shapes.
- Color-stops 1, 2, and so forth: Define the colors and their location inside the shape.
Example:
Here is a sample HTML code snippet that employs a radial gradient as the background:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
width: 200px;
background: radial-gradient(circle, #ff0000, #00ff00);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
Applying the radial-gradient function creates a radial gradient background, while specifying the dimensions of the element with the class gradient-example as 200 pixels for both height and width. The gradient starts as red (#ff0000) in the center and transitions to green (#00ff00) towards the boundaries in a circular pattern.
Output:
Example 2:
Here is a sample HTML code snippet that demonstrates a radial gradient with uniformly distributed color stops:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
width: 200px;
background: radial-gradient(circle at center, #ff0000 0%, #00ff00 33.3%, #0000ff 66.6%);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
This instance demonstrates the utilization of the radial-gradient function to implement a radial gradient background while specifying the dimensions of the element with the class gradient-example as 200 pixels for both height and width. The gradient is centered within the element and takes on a circular shape. It includes three color stops that are evenly distributed.
Red is the color stop at 0% (#ff0000).
At 33.3%, the color stop is green (#00ff00).
At 66.6%, the color stop is blue (#0000ff).
Output:
Example 3:
Here is a sample HTML code snippet showcasing a radial gradient featuring color stops of various shapes:
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
height: 200px;
width: 200px;
background: radial-gradient(ellipse closest-side at 50% 50%, #ff0000 20%, #00ff00 50%, #0000ff 80%);
}
</style>
</head>
<body>
<div class="gradient-example"></div>
</body>
</html>
This instance demonstrates the utilization of the radial-gradient function to implement a radial gradient background. It also specifies the dimensions of the element having the class gradient-example to be 200 pixels for both height and width. The gradient forms an elliptical shape positioned 50% to the left of the element's top and 50% to its right, featuring three distinct color stops.
At 20%, the color stops are red (#ff0000).
Green (#00ff00) is the color stop at 50%.
Blue (#0000ff) is the color stop at 80%.
Output: