Library / Search

Find your
next move.

3 useful things

Animated Gradient Background

Create a smoothly animating gradient background that shifts colors continuously.

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;

#gradient#animation

easy

02CSS↗

Parallax Scrolling Effect

Create depth with parallax scrolling backgrounds using pure CSS.

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

#parallax#scroll

medium

03CSS↗

Animated Wave Background

Create smooth flowing wave animations for backgrounds and sections.

.wave-container {
  position: relative;
  width: 100%;
  height: 400px;

#wave#animation