Languages
[Edit]
EN

CSS - linear gradients

0 points
Created by:
Walter
286

In this article, we would like to show you how to create linear gradients using CSS.

Quick solution:

div {
  background: linear-gradient(yellow, green);
}

 

1. Simple linear gradients

In this section, we present three simple multi-color linear gradients.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      margin-top: 10px;
      height: 50px;
      width: 100%;
    }
    
    .gradient1 {
      background: linear-gradient(yellow, green);
    }

    .gradient2 {
      background: linear-gradient(yellow, purple, red);
    }

    .gradient3 {
      background: linear-gradient(red, yellow, green, blue);
    }
  </style>
</head>
<body>
  <div class="gradient1"></div>
  <div class="gradient2"></div>
  <div class="gradient3"></div>
</body>
</html>

2. Turned gradients

To turn gradients, you need to specify the value in degrees (e.g 45deg) or float number with turn keyword (e.g 0.25turn).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      margin-top: 10px;
      height: 50px;
      width: 100%;
    }
    
    .gradient1 {
      background: linear-gradient(0.25turn, yellow, lightgreen);
    }

    .gradient2 {
      background: linear-gradient(.25turn, yellow, purple, red);
    }

    .gradient3 {
      background: linear-gradient(45deg, red, yellow, green, blue);
    }
  </style>
</head>
<body>
  <div class="gradient1"></div>
  <div class="gradient2"></div>
  <div class="gradient3"></div>
</body>
</html>

3. Custom linear gradients

In this section, we present how to use different syntax to create custom linear gradients.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      margin-top: 10px;
      height: 50px;
      width: 100%;
    }
    
    .gradient1 {
      /* from bottom-right to top-left corner,
         starting green and finishing yellow */
      background: linear-gradient(to left top, green, yellow);
    }

    .gradient2 {
      /* from top to bottom, starting yellow, turning 
         purple at 30% of the elements length, finishing red */
      background: linear-gradient(yellow, purple 30%, red);
    }

    .gradient3 {
      /* the same as gradient2 but tilted 45 degrees */
      background: linear-gradient(45deg, yellow, purple 30%, red);
    }
  </style>
</head>
<body>
  <div class="gradient1"></div>
  <div class="gradient2"></div>
  <div class="gradient3"></div>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join