Farbverlauf mit CSS 1 2 3 4 5 6 7 8

Animationen ( Beispiele)

<style>
div.element {
 width: 400px;
 height: 400px;
  background: repeating-radial-gradient(circle, #FF7FED 40%, #0026FF 50%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

<style>
div.element {
 width: 400px;
 height: 400px;
  background: repeating-conic-gradient(red, orange, yellow, green, blue, indigo, violet 45deg);
  animation: gradient2 15s ease infinite;
}

@keyframes gradient2 {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
</style>

<style>
div.element {
 width: 400px;
 height: 400px;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
 border-radius: 50%;
  animation: gradient3 5s ease infinite;
}

@keyframes gradient3 {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
</style>

Mauszeiger draufhalten!

<style>
div.element4 {
 width: 400px;
 height: 400px;
  background: repeating-conic-gradient(red, blue, green, yellow 10%);
 border-radius: 50%;
  animation: gradient4 25s ease infinite, spin 10s linear infinite;
 animation-play-state: paused;
}

div.element4:hover {
 animation-play-state: running;
}

@keyframes gradient4 {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes spin {
 to {
  transform: rotate(1turn);
 }
}
</style>

<div class="element4"></div>

Mauszeiger draufhalten!

<style>
div.element5 {
 width: 400px;
 height: 400px;
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
 border-radius: 50%;
 box-shadow: 0px 0px 3px 1px #656565;
 background-size: 110% 110%;
 animation: gradient6 10s ease infinite, spin6 10s linear infinite;
 animation-play-state: paused;
}

div.element5:hover {
 animation-play-state: running;
}

@keyframes gradient6 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 50%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 50% 100%;
  }
}

@keyframes spin6 {
 to {
  transform: rotate(-3turn);
 }
}
</style>

<div class="element5"></div>

Mauszeiger draufhalten!

<style>
div.element7 {
 width: 400px;
 height: 400px;
  background:
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3em,
		hotpink 1em,
			transparent 6em,
		tomato 6.5em
	),
	repeating-radial-gradient(
		ellipse farthest-corner,
		transparent 1em,
		cornflowerblue 1em,
		 	transparent 5em,
		cornflowerblue 2em
	),
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3em,
		gold 1em,
			transparent 2em,
		gold 4em
	),
	repeating-radial-gradient(
		circle,
		transparent 3em,
		gold 1em,
			transparent 2em,
		gold 4em
	), white;

 border-radius: 50%;
 box-shadow: 0px 0px 3px 1px #656565;
 background-size: 111% 112%;
 animation: gradient7 10s ease-in infinite alternate, spin7 10s ease-out infinite alternate;
 animation-play-state: paused;
}

div.element7:hover {
 animation-play-state: running;
}

@keyframes gradient7 {
  from {
    filter: hue-rotate(0);
    background-position: 0% 100%;
  }
  to {
    filter: hue-rotate(360deg);
    background-position: 100% 0%;
  }
}

@keyframes spin7 {
 to {
  transform: rotate(4turn);
 }
}
</style>

<div class="element7"></div>

Mauszeiger draufhalten!

<style>
div.element9 {
 width: 400px;
 height: 400px;
  background: repeating-radial-gradient(circle, #FF7FED 40%, #0026FF 50%);

 border-radius: 50%;
 box-shadow: 0px 0px 3px 1px #656565;
 animation: gradient9 12s infinite alternate;
 animation-play-state: paused;
}

div.element9:hover {
 animation-play-state: running;
}

@keyframes gradient9 {
  from {
    filter: hue-rotate(0);
    transform: skew(0deg);
  }
  to {
    filter: hue-rotate(360deg);
    transform: skew(50deg);
  }
}
</style>

<div class="element9"></div>

Tipps

Weitere Animationen: Animationen mit Keyframes • Blinkende Inhalte mit Keyframes • Animierte Sternebewertung • Regenbogen Text • Ladeanimation ohne Bild-Grafik • Box-Shadow Animation • Button Glas-Effekte • Kompass-Animation • Eine Animation ab einer bestimmten Scroll-Position starten • Bilder-Farbrotation mit Gradient • Animierte Box mit Keyframes • Nahtlose unendliche Hintergrundbild-Scroll-Animation

Animated Gradient Generator - https://codepen.io/quadbaup/full/ZEQqzqM