Как пользоваться: CSS-конфетти
- Предпросмотр стартует с конфетти в разных цветах.
- Задайте количество, размер и скорость; Sway делает падение более плавным и покачивающимся.
- Отключите Mixed colors, чтобы оставить один фирменный цвет.
- Скопируйте код на страницу благодарности или успешной отправки.
Конфетти, которое кружится
Каждая частица — небольшой прямоугольник, который падает с лёгким покачиванием и вращается в 3D (rotate3d), поэтому он переворачивается между лицевой стороной и ребром, как настоящая бумага. Цвет для каждой частицы задаётся через CSS-переменную.
Для снега, дождя и собственных форм посмотрите генератор анимации частиц.
Также ищут как: эффект конфетти для сайта, анимация конфетти на фон, конфетти генератор онлайн.
Инструменты, которые хорошо сочетаются с CSS-конфетти
- CSS-снег — Устройте на своём сайте снегопад к праздникам: мягкий снег или снежинки, лёгкая поземка или метель.
- Падающие звёзды — Запустите метеоры, проносящиеся по ночному небу в фоновом блоке, или пусть фигурки звёзд плавно падают и вращаются.
- CSS-анимация дождя — Добавьте дождь на страницу или в главный блок — от лёгкой мороси до косого ливня.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как добавить конфетти на страницу благодарности?
Скопируйте HTML и CSS и вставьте их на страницу. Конфетти будет падать постоянно поверх страницы и не будет блокировать клики.
Можно ли использовать фирменные цвета?
Отключите Mixed colors и выберите свой цвет или измените значения --c в HTML.
Можно ли сделать однократный залп вместо бесконечного падения?
Этот генератор создаёт непрерывное падение. Для одноразового залпа замените infinite на 1 в правиле анимации, тогда каждая частица упадёт один раз.
Можно ли установить CSS-конфетти как веб-приложение и пользоваться им офлайн?
Да. CSS-конфетти — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.