CSS Linear And Radial Gradients Demo

Summary

Here a few examples using CSS to create linear and radial gradients on some block level div elements.

I have also included a link to a fiddle where I animate the css gradient.

This could be applied to the background of the page… but I have styled some div elements.

HTML

<div class="gradient--one"></div>
<div class="gradient--two"></div>
<div class="gradient--three"></div>
<div class="gradient--four"></div>
<div class="gradient--five"></div>
<div class="gradient--six"></div>

CSS

* {
  box-sizing: border-box;
}
body {
  height: 100vh;
  padding: 0;
  margin: 0;
}
div {
  height: 300px;
  width: 100%;
}

Here are the styles for the css gradients.

.gradient--one {
  background: linear-gradient(to bottom left, teal 20%, purple);
}
.gradient--two {
  background: linear-gradient(to right, cyan, magenta, yellow);
}
.gradient--three {
  background: radial-gradient(
    circle at top right,
    rgb(75, 0, 0),
    rgb(229, 0, 115),
    gold
  );
}
.gradient--four {
  background-image: conic-gradient(red, yellow, green, orange, pink);
}
.gradient--five {
  background: repeating-linear-gradient(
    cyan 50px,
    magenta 50px 100px,
    cyan 100px 150px
  );
}
.gradient--six {
  background-image: linear-gradient(to top right, #30cfd0 0%, #330867 100%);
}

Here are the styles for the css animations.

:root {
  --gradient--one: linear-gradient(90deg, deepskyblue, dodgerblue, darkblue);

  --gradient--two: radial-gradient(
    circle at top right,
    fuchsia,
    purple,
    magenta,
    darkmagenta,
    darkviolet
  );

  --gradient--three: linear-gradient(to left top, yellow, cyan, goldenrod);

  --gradient--four: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );

  --gradient-five: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

@keyframes bg-animation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

.animation--one {
  background: deepskyblue;
  background-size: 200%;
  background-image: var(--gradient--one);
  animation: bg-animation 30s infinite alternate;
}
.animation--two {
  background: fuchsia;
  background-size: 200%;
  background-image: var(--gradient--two);
  animation: bg-animation 40s infinite alternate;
}
.animation--three {
  background: teal;
  background-size: 300%;
  background-image: var(--gradient--three);
  animation: bg-animation 20s infinite alternate;
}
.animation--four {
  background: red;
  background-size: 300%;
  background-image: var(--gradient--four);
  animation: bg-animation 20s infinite alternate;
}
.animation--five {
  background: red;
  background-size: 180%;
  background-image: var(--gradient-five);
  background: var(--gradient-five);
  animation: bg-animation 10s infinite alternate;
}

Tech and Tools

• CSS
• HTML
• JS Fiddle

Demo

Open demo on JS Fiddle.

Link to gradients.

Link to Gradient Demo

Link to animations.

Link to Animation Demo