Languages
[Edit]
EN

CSS - radial gradients

0 points
Created by:
Kadeem-Craig
456

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

Quick solution:

div {
  background-image: radial-gradient(start-color, ... , end-color);
}

 

1. Simple radial gradients

In this example, we create three simple multi-color radial gradients using background: radial-gradient(); CSS property.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    body{ display: flex }
    
    div {
      margin: 10px;
      height: 100px;
      width: 100px;
    }
    
    .gradient1 {
      background: radial-gradient(yellow, green);
    }

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

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

2. Set color stop

To set the color stop, simply specify the percentage value (e.g 50%) or length (e.g 25px) right after the color.

Note:

A percentage of 0%, or a length of 0, represents the center of the gradient.

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      display: flex
    }
    
    div {
      margin: 10px;
      height: 100px;
      width: 100px;
    }
    
    .gradient1 {
      background: radial-gradient(yellow, green 25px);
    }

    .gradient2 {
      background: radial-gradient(yellow 10%, purple 20%, red 60%);
    }

    .gradient3 {
      background: radial-gradient(red 20%, yellow 30%, green 40%, blue);
    }

  </style>
</head>
<body>
  <div class="gradient1"></div>
  <div class="gradient2"></div>
  <div class="gradient3"></div>
</body>
</html>

3. Shape

The radial gradient can be an ellipse (default value) or circle. To make it a circle, you need to specify it before gradient colors.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      display: flex
    }
    
    div {
      margin: 10px;
      height: 75px;
      width: 200px;
    }

    .ellipse {
      /* ellipse is a default value */
      background: radial-gradient(yellow, purple, red);
    }
    
    .circle {
      background: radial-gradient(circle, yellow, purple, red);
    }

  </style>
</head>
<body>
  <div class="ellipse"></div>
  <div class="circle"></div>
</body>
</html>

4. Custom radial gradients

In this section, we create some custom radial gradients for round div elements to achieve ball effect.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    body {
      display: flex;
    }

    div {
      height: 100px;
      width: 100px;
      border: 2px solid black;
      border-radius: 50%;
      margin: 10px;
      box-shadow: 10px 5px 5px #BEBEBE;
    }

    .ball-1 {
      background: radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac);
    }

    .ball-2 {
      background: radial-gradient(circle at top, yellow, transparent),
                  radial-gradient(ellipse at bottom, red, transparent); 
    }
    
    .ball-3 {
      background: radial-gradient(ellipse at top, lightblue, transparent),
                  radial-gradient(circle at bottom, black 50%, transparent); 
    }

  </style>
</head>
<body>
  <div class="ball-1"></div>
  <div class="ball-2"></div>
  <div class="ball-3"></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