Как пользоваться: CSS-снег
- Предпросмотр стартует с режима Снег; выберите Снежинки, чтобы получить шестилучевые снежинки.
- Задайте количество снежинок, их размер и скорость; добавьте Ветер, чтобы снег кружил.
- Выберите всю страницу или один раздел.
- Скопируйте код и вставьте его перед
</body>.
Эффект снега без библиотек
Снег — это набор мелких размытых точек, которые падают с немного разной скоростью: более мелкие снежинки падают медленнее, что добавляет глубины, а каждая плавно покачивается из стороны в сторону. Всё работает на CSS-анимациях transform, поэтому эффект остаётся плавным и лёгким. Слой использует pointer-events: none, так что ссылки и кнопки продолжают работать.
Другие эффекты — дождь, падающие звёзды, конфетти, собственный SVG — доступны в генераторе анимации частиц.
Также ищут как: падающий снег на сайте, эффект снегопада html, новогодний снег для сайта, снег javascript.
Инструменты, которые хорошо сочетаются с CSS-снег
- CSS-анимация дождя — Добавьте дождь на страницу или в главный блок — от лёгкой мороси до косого ливня.
- Падающие звёзды — Запустите метеоры, проносящиеся по ночному небу в фоновом блоке, или пусть фигурки звёзд плавно падают и вращаются.
- CSS-конфетти — Отпразднуйте запуск, регистрацию или день рождения падающим конфетти, которое плавно кружится и переворачивается в разных цветах.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
Часто задаваемые вопросы
Как добавить снег на сайт к Новому году?
Скопируйте HTML и CSS отсюда и вставьте их непосредственно перед закрывающим тегом body или в блок Custom HTML / Embed в WordPress, Webflow или Shopify. После праздников код можно удалить.
Снег будет мешать кликам?
Нет. Слой использует pointer-events: none, поэтому посетители могут кликать по всему, что находится под ним.
Можно ли сделать снег только в шапке сайта?
Да — выберите «Один раздел», вставьте код внутрь шапки и задайте шапке position: relative.
Можно ли установить CSS-снег как веб-приложение и пользоваться им офлайн?
Да. CSS-снег — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.