Parallax CSS Generator

Generate parallax scrolling effects with multiple layers

Layers

3

Layer Settings

Layer 1
0.5
400px
Layer 2
0.3
300px
Layer 3
0.1
200px

Presets

Live Preview

Layer 1
Layer 2
Layer 3

Generated CSS

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}


.parallax-layer-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(-0.5px) scale(1.5);
  height: 400px;
}

.parallax-layer-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(-0.3px) scale(1.3);
  height: 300px;
}

.parallax-layer-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(-0.1px) scale(1.1);
  height: 200px;
}