Syntax error Setting Direction of Linear Gradients using Angles in CSS

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

332 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements