Creating Linear Gradients using Multiple Color Stops in CSS

CSS Web Development Front End Technology

To create a linear gradient using multiple color stops, the code is as follows −

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   height: 200px;
   width: 100%;
   display: inline-block;
   margin-right: 10px;
}
.linearGradient {
   background-image: linear-gradient(to left, orange, blue,green,pink,yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using multiple color stops</h1>
<div class="linearGradient"></div>
</body>
</html>

Output

The above code will produce the following output −

AmitDiwan

Published on 11-May-2020 09:38:42

Related Questions & Answers
Create a differently spaced Color Stops with CSS Radial Gradients
Create an evenly spaced color stops with CSS Radial Gradients
Setting the Location Color Stops using CSS
Setting Direction of Linear Gradients using Angles in CSS
How to use angles on linear gradients using CSS
How to repeat linear gradients with CSS
CSS3 Linear gradients
Using the CSS3 Linear and Radial Gradients
Linear gradient with multiple color stop
Creating CSS3 Radial Gradients
CSS3 Multi color Gradients
Arrange two or more colors in linear formats using CSS3 Gradients
Types of Gradients in CSS
Creating multiple process using fork() in C
Setting the shape of the radial gradients using CSS

Previous Page Print Page