Setting the Location Color Stops using CSS


To create linear gradient, use the linear-gradient() method of the background-image property.

Syntax

The following is the syntax −

background-image: linear-gradient(angle, color-stop1, color-stop2);

The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions −

background-image: linear-gradient(
   rgb(61, 255, 2) 40%,
   rgb(0, 174, 255) 80%,
   rgb(255, 29, 29) 20%
);

The gradient can also be set on an image using the url() with linear-gradient() −

background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),    url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");

The following are some examples for setting the location color stops in linear gradient using CSS −

Color stops evenly spaced

In this example, the color stops are evenly spaced with percentage −

background-image: linear-gradient(
   rgb(61, 255, 2),
   rgb(0, 174, 255),
   rgb(255, 29, 29)
);

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         height: 100px;
         background-image: linear-gradient(
            rgb(61, 255, 2),
            rgb(0, 174, 255),
            rgb(255, 29, 29)
         );
      }
   </style>
</head>
<body>
   <h1>Linear gradient location color stops</h1>
   <h3>Evenly Spaced</h3>
   <div></div>
</body>
</html>

Color stops unevenly spaced

In this example, the color stops are unevenly spaced with percentage i.e.,

background-image: linear-gradient(
   rgb(61, 255, 2) 40%,
   rgb(0, 174, 255) 80%,
   rgb(255, 29, 29) 20%
);

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         height: 100px;
         background-image: linear-gradient(
            rgb(61, 255, 2) 40%,
            rgb(0, 174, 255) 80%,
            rgb(255, 29, 29) 20%
         );
      }
   </style>
</head>
<body>
   <h1>Linear gradient location color stops</h1>
   <h3>Unevenly Spaced</h3>
   <div></div>
</body>
</html>

Set the color of the linear gradient

The following is the code for setting the direction of linear gradients using angles in CSS. The color stops are also set −

.linearGradient {
   background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
   background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         height: 200px;
         width: 300px;
         display: inline-block;
         margin-right: 10px;
      }
      .linearGradient {
         background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
      }
      .linearGradient1 {
         background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
      }
   </style>
</head>
<body>
   <h1>Linear Gradient direction using angles</h1>
   <div class="linearGradient"></div>
   <div class="linearGradient1"></div>
</body>
</html>

Set the angle of the linear gradient with color stops

The angle of the linear gradient is set first, and then comes the color stops −

Spain:lang(es){
   background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
   background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
   background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 10px;
         padding: 10px;
         text-align: center;
         border: 1px solid black;
      }
      .Italy:lang(it)::after {
         padding: 20px;
         content: '~ Italy';
         font-style: italic;
      }
      .Spain:lang(es)::after {
         padding: 8px;
         content: '~ Spain';
         font-style: italic;
      }
      .Germany:lang(nl)::after {
         padding: 20px;
         content: '~ Belgium';
         font-style: italic;
      }
      .Spain:lang(es){
         background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
      }
      .Italy:lang(it){
         background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
      }
      .Germany:lang(nl){
         background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
      }
   </style>
</head>
<body>
   <div class="Italy" lang='it'>Rome</div>
   <div class="Germany" lang='nl'>Brussels</div>
   <div class="Spain" lang='es'>Madrid</div>
</body>
</html>

Set a gradient for the background image with color stops

The linear gradient is set using the background-image property with the value linear-gradient(). The image is set using the url() −

background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),    url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body,
      html {
         height: 100%;
         margin: 0;
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      *,
      *::before,
      *::after {
         box-sizing: border-box;
      }
      h1 {
         font-size: 60px;
         font-weight: bolder;
      }
      .heroContainer {
         background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),
         url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");
         height: 50%;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
      }
      .heroCaption {
         text-align: center;
         position: absolute;
         top: 20%;
         left: 45%;
         color: white;
      }
      .heroCaption button {
         border: none;
         outline: none;
         display: inline-block;
         padding: 20px;
         color: rgb(255, 255, 255);
         opacity: 0.8;
         font-size: 20px;
         background-color: rgb(47, 151, 21);
         text-align: center;
         cursor: pointer;
      }
      .heroCaption button:hover {
         opacity: 1;
      }
   </style>
</head>
<body>
   <div class="heroContainer">
      <div class="heroCaption">
         <h1>I am Amit</h1>
         <h2>And I'm an Entrepreneur</h2>
         <button>Contact Me</button>
      </div>
   </div>
</body>
</html>

Updated on: 27-Dec-2023

119 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements