CSS-эффекты и графика

Ступенчатые фоны

Террасы из прямоугольных ступеней: несколько слоёв со смещением, общим градиентом и убывающей прозрачностью.

Лестница

Направление

Ступеней: 6 Слоёв: 3 Смещение слоя: 14% Прозрачность дальних слоёв: 0% Высота холста: 600 px

Дальний слой Ближний слой Фон

Превью

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600" preserveAspectRatio="none">
  <rect width="1200" height="600" fill="#f8fafc"/>
  <path fill="#0ea5e9" d="M 0 0 L 0 100 L 200 100 L 200 200 L 400 200 L 400 300 L 600 300 L 600 400 L 800 400 L 800 500 L 1000 500 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z"/>
  <path fill="#206ab5" d="M 0 84 L 0 170 L 200 170 L 200 256 L 400 256 L 400 342 L 600 342 L 600 428 L 800 428 L 800 514 L 1000 514 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z"/>
  <path fill="#312e81" d="M 0 168 L 0 240 L 200 240 L 200 312 L 400 312 L 400 384 L 600 384 L 600 456 L 800 456 L 800 528 L 1000 528 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z"/>
</svg>

CSS: фон блока

.stairs {
  min-height: 600px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' width='1200' height='600' preserveAspectRatio='none'%3E %3Crect width='1200' height='600' fill='%23f8fafc'/%3E %3Cpath fill='%230ea5e9' d='M 0 0 L 0 100 L 200 100 L 200 200 L 400 200 L 400 300 L 600 300 L 600 400 L 800 400 L 800 500 L 1000 500 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z'/%3E %3Cpath fill='%23206ab5' d='M 0 84 L 0 170 L 200 170 L 200 256 L 400 256 L 400 342 L 600 342 L 600 428 L 800 428 L 800 514 L 1000 514 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z'/%3E %3Cpath fill='%23312e81' d='M 0 168 L 0 240 L 200 240 L 200 312 L 400 312 L 400 384 L 600 384 L 600 456 L 800 456 L 800 528 L 1000 528 L 1000 600 L 1200 600 L 1200 600 L 0 600 Z'/%3E %3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}