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

Зернистый градиент

Градиент плюс шумовой слой и режим наложения — одним блоком CSS, без единой загружаемой картинки.

Градиент

Тип

Угол: 135°

Начало Середина Конец

Три цвета вместо двух Плотность зерна: 30% Размер зерна: 0.85

Режим наложения

Превью

Готовый блок CSS

.grainy {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='300' height='300'%3E %3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.3'/%3E %3C/svg%3E"),
    linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b);
  background-blend-mode: overlay, normal;
}

Только градиент, без зерна

background-image: linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b);