Setting Direction of Linear Gradients using Angles in CSS

For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction −

  • Value 0deg is the "to top" direction

  • Value 90deg is the "to right" direction

  • Value of 180deg is the "to bottom" direction

The following is the syntax −

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

Set the angle of the linear gradient

The following is the code for setting the direction of linear gradients using angles in CSS.

.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 linear gradient for the background image

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: 2023-12-27T16:10:05+05:30

338 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements