CoverT 25: radial-gradient

codeInteractive Code Example

radial-gradient() function can be used creates a circular (or ellipis) background image of color stops. There are a ton of options around the location of the origin, colors, etc.

Code

<div class="box"></div>
.box {
  height: 500px;
  width: 500px;

  background-image: radial-gradient(
    circle at center,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Results