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

Размытые пятна

Несколько цветных пятен с сильным размытием — мягкая аврора для hero-блока. Отдаётся и картинкой SVG, и чистым CSS без единого файла.

Пятна

Пятен: 4 Размах пятна: 55% Размытие в SVG: 90 px

Палитра пятен

Фон

Вариант: 11

Превью на CSS

CSS без картинок

.aurora {
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at 30.7% 63.2%, #6366f1 0%, transparent 62.2%),
    radial-gradient(circle at 49.3% 35%, #ec4899 0%, transparent 78.5%),
    radial-gradient(circle at 54.7% 69.8%, #22d3ee 0%, transparent 90%),
    radial-gradient(circle at 44.5% 18.2%, #f59e0b 0%, transparent 90%);
}

SVG с настоящим размытием

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" width="900" height="600">
  <defs><filter id="soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="90"/></filter></defs>
  <rect width="900" height="600" fill="#0f172a"/>
  <g filter="url(#soft)">
  <circle cx="276.3" cy="379.2" r="283.2" fill="#6366f1"/>
  <circle cx="443.7" cy="210" r="381" fill="#ec4899"/>
  <circle cx="492.3" cy="418.8" r="457.2" fill="#22d3ee"/>
  <circle cx="400.5" cy="109.2" r="459" fill="#f59e0b"/>
  </g>
</svg>

Вариант на CSS легче и не грузит отдельный файл, но края пятен там задаёт radial-gradient, а не настоящее размытие: на больших блоках разница заметна.