Generator efektu konfetti

Dodaj efekt konfetti do swojej strony – animacja świętowania z konfiguracją kolorów, kształtów i intensywności. Pobierz kod JS/CSS.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Gęstość 90

Minimalny rozmiar 3

Maksymalny rozmiar 10

Krycie / przezroczystość 0.85

Paleta kolorów (oddzielone przecinkami)

Kolor tła

Ziarno losowości (seed)

Wysokość podglądu (px) 360

Wynik

.confetti-bg {
  background-color: #0F172A;
  background-image: 
  radial-gradient(circle at 44% 49%, rgba(77, 255, 184, 0.736) 0 4px, transparent 4.6px),
  radial-gradient(circle at 15% 88%, rgba(255, 228, 77, 0.789) 0 6px, transparent 6.6px),
  radial-gradient(circle at 98% 66%, rgba(255, 77, 77, 0.798) 0 5px, transparent 5.6px),
  radial-gradient(circle at 11% 48%, rgba(166, 77, 255, 0.81) 0 4px, transparent 4.6px),
  radial-gradient(circle at 24% 78%, rgba(77, 255, 184, 0.65) 0 6px, transparent 6.6px),
  radial-gradient(circle at 65% 28%, rgba(166, 77, 255, 0.774) 0 8px, transparent 8.6px),
  radial-gradient(circle at 95% 88%, rgba(166, 77, 255, 0.68) 0 3px, transparent 3.6px),
  radial-gradient(circle at 2% 46%, rgba(255, 184, 77, 0.83) 0 7px, transparent 7.6px),
  radial-gradient(circle at 88% 2%, rgba(255, 184, 77, 0.811) 0 9px, transparent 9.6px),
  radial-gradient(circle at 10% 18%, rgba(255, 184, 77, 0.685) 0 9px, transparent 9.6px),
  radial-gradient(circle at 92% 87%, rgba(255, 77, 77, 0.715) 0 4px, transparent 4.6px),
  radial-gradient(circle at 50% 85%, rgba(166, 77, 255, 0.668) 0 6px, transparent 6.6px),
  radial-gradient(circle at 27% 45%, rgba(77, 163, 255, 0.762) 0 10px, transparent 10.6px),
  radial-gradient(circle at 21% 46%, rgba(166, 77, 255, 0.647) 0 7px, transparent 7.6px),
  radial-gradient(circle at 43% 86%, rgba(77, 255, 184, 0.847) 0 4px, transparent 4.6px),
  radial-gradient(circle at 69% 3%, rgba(255, 228, 77, 0.661) 0 9px, transparent 9.6px),
  radial-gradient(circle at 43% 3%, rgba(255, 77, 77, 0.708) 0 3px, transparent 3.6px),
  radial-gradient(circle at 39% 64%, rgba(77, 163, 255, 0.673) 0 3px, transparent 3.6px),
  radial-gradient(circle at 32% 61%, rgba(255, 77, 77, 0.731) 0 7px, transparent 7.6px),
  radial-gradient(circle at 41% 81%, rgba(255, 77, 77, 0.651) 0 5px, transparent 5.6px),
  radial-gradient(circle at 52% 66%, rgba(255, 77, 77, 0.643) 0 7px, transparent 7.6px),
  radial-gradient(circle at 90% 93%, rgba(255, 77, 77, 0.652) 0 8px, transparent 8.6px),
  radial-gradient(circle at 52% 21%, rgba(77, 163, 255, 0.799) 0 5px, transparent 5.6px),
  radial-gradient(circle at 96% 50%, rgba(255, 184, 77, 0.673) 0 8px, transparent 8.6px),
  radial-gradient(circle at 28% 33%, rgba(255, 228, 77, 0.812) 0 4px, transparent 4.6px),
  radial-gradient(circle at 81% 100%, rgba(77, 163, 255, 0.697) 0 3px, transparent 3.6px),
  radial-gradient(circle at 32% 43%, rgba(166, 77, 255, 0.747) 0 5px, transparent 5.6px),
  radial-gradient(circle at 58% 21%, rgba(255, 228, 77, 0.789) 0 10px, transparent 10.6px),
  radial-gradient(circle at 98% 17%, rgba(255, 184, 77, 0.747) 0 6px, transparent 6.6px),
  radial-gradient(circle at 58% 63%, rgba(255, 184, 77, 0.659) 0 8px, transparent 8.6px),
  radial-gradient(circle at 18% 81%, rgba(166, 77, 255, 0.696) 0 3px, transparent 3.6px),
  radial-gradient(circle at 59% 26%, rgba(255, 184, 77, 0.745) 0 10px, transparent 10.6px),
  radial-gradient(circle at 96% 45%, rgba(166, 77, 255, 0.734) 0 6px, transparent 6.6px),
  radial-gradient(circle at 61% 88%, rgba(255, 184, 77, 0.749) 0 10px, transparent 10.6px),
  radial-gradient(circle at 40% 22%, rgba(77, 255, 184, 0.74) 0 3px, transparent 3.6px),
  radial-gradient(circle at 24% 93%, rgba(255, 228, 77, 0.69) 0 3px, transparent 3.6px),
  radial-gradient(circle at 17% 32%, rgba(166, 77, 255, 0.656) 0 5px, transparent 5.6px),
  radial-gradient(circle at 55% 56%, rgba(255, 77, 77, 0.843) 0 6px, transparent 6.6px),
  radial-gradient(circle at 46% 1%, rgba(255, 77, 77, 0.844) 0 3px, transparent 3.6px),
  radial-gradient(circle at 72% 18%, rgba(166, 77, 255, 0.748) 0 8px, transparent 8.6px),
  radial-gradient(circle at 8% 56%, rgba(255, 228, 77, 0.74) 0 8px, transparent 8.6px),
  radial-gradient(circle at 60% 62%, rgba(255, 77, 77, 0.794) 0 7px, transparent 7.6px),
  radial-gradient(circle at 79% 28%, rgba(166, 77, 255, 0.808) 0 5px, transparent 5.6px),
  radial-gradient(circle at 9% 2%, rgba(77, 163, 255, 0.67) 0 6px, transparent 6.6px),
  radial-gradient(circle at 36% 76%, rgba(77, 255, 184, 0.734) 0 9px, transparent 9.6px),
  radial-gradient(circle at 72% 40%, rgba(255, 228, 77, 0.739) 0 10px, transparent 10.6px),
  radial-gradient(circle at 46% 55%, rgba(166, 77, 255, 0.664) 0 7px, transparent 7.6px),
  radial-gradient(circle at 34% 96%, rgba(255, 77, 77, 0.804) 0 3px, transparent 3.6px),
  radial-gradient(circle at 31% 25%, rgba(77, 163, 255, 0.815) 0 6px, transparent 6.6px),
  radial-gradient(circle at 85% 86%, rgba(255, 77, 77, 0.847) 0 4px, transparent 4.6px),
  radial-gradient(circle at 54% 46%, rgba(77, 255, 184, 0.778) 0 4px, transparent 4.6px),
  radial-gradient(circle at 49% 30%, rgba(255, 228, 77, 0.795) 0 9px, transparent 9.6px),
  radial-gradient(circle at 64% 94%, rgba(77, 255, 184, 0.728) 0 3px, transparent 3.6px),
  radial-gradient(circle at 99% 81%, rgba(255, 184, 77, 0.696) 0 7px, transparent 7.6px),
  radial-gradient(circle at 65% 85%, rgba(255, 228, 77, 0.717) 0 4px, transparent 4.6px),
  radial-gradient(circle at 100% 63%, rgba(77, 163, 255, 0.651) 0 8px, transparent 8.6px),
  radial-gradient(circle at 84% 88%, rgba(255, 77, 77, 0.749) 0 10px, transparent 10.6px),
  radial-gradient(circle at 5% 38%, rgba(255, 184, 77, 0.718) 0 6px, transparent 6.6px),
  radial-gradient(circle at 42% 45%, rgba(255, 184, 77, 0.705) 0 10px, transparent 10.6px),
  radial-gradient(circle at 71% 86%, rgba(77, 163, 255, 0.743) 0 3px, transparent 3.6px),
  radial-gradient(circle at 88% 48%, rgba(255, 184, 77, 0.718) 0 6px, transparent 6.6px),
  radial-gradient(circle at 46% 6%, rgba(77, 255, 184, 0.82) 0 3px, transparent 3.6px),
  radial-gradient(circle at 64% 67%, rgba(77, 163, 255, 0.741) 0 10px, transparent 10.6px),
  radial-gradient(circle at 36% 97%, rgba(77, 255, 184, 0.81) 0 10px, transparent 10.6px),
  radial-gradient(circle at 74% 67%, rgba(255, 184, 77, 0.674) 0 6px, transparent 6.6px),
  radial-gradient(circle at 68% 36%, rgba(255, 184, 77, 0.691) 0 9px, transparent 9.6px),
  radial-gradient(circle at 91% 42%, rgba(166, 77, 255, 0.739) 0 3px, transparent 3.6px),
  radial-gradient(circle at 51% 3%, rgba(255, 184, 77, 0.829) 0 3px, transparent 3.6px),
  radial-gradient(circle at 72% 17%, rgba(166, 77, 255, 0.748) 0 7px, transparent 7.6px),
  radial-gradient(circle at 70% 27%, rgba(255, 228, 77, 0.788) 0 7px, transparent 7.6px),
  radial-gradient(circle at 89% 46%, rgba(77, 163, 255, 0.694) 0 8px, transparent 8.6px),
  radial-gradient(circle at 71% 90%, rgba(77, 255, 184, 0.83) 0 6px, transparent 6.6px),
  radial-gradient(circle at 92% 20%, rgba(255, 228, 77, 0.796) 0 7px, transparent 7.6px),
  radial-gradient(circle at 35% 80%, rgba(255, 184, 77, 0.767) 0 3px, transparent 3.6px),
  radial-gradient(circle at 95% 12%, rgba(255, 77, 77, 0.693) 0 9px, transparent 9.6px),
  radial-gradient(circle at 49% 33%, rgba(77, 163, 255, 0.747) 0 6px, transparent 6.6px),
  radial-gradient(circle at 81% 72%, rgba(255, 184, 77, 0.827) 0 3px, transparent 3.6px),
  radial-gradient(circle at 21% 58%, rgba(255, 184, 77, 0.766) 0 5px, transparent 5.6px),
  radial-gradient(circle at 100% 33%, rgba(77, 255, 184, 0.828) 0 10px, transparent 10.6px),
  radial-gradient(circle at 62% 42%, rgba(255, 228, 77, 0.69) 0 10px, transparent 10.6px),
  radial-gradient(circle at 74% 5%, rgba(77, 255, 184, 0.78) 0 9px, transparent 9.6px),
  radial-gradient(circle at 87% 21%, rgba(255, 184, 77, 0.726) 0 7px, transparent 7.6px),
  radial-gradient(circle at 13% 78%, rgba(77, 255, 184, 0.804) 0 7px, transparent 7.6px),
  radial-gradient(circle at 50% 12%, rgba(255, 184, 77, 0.662) 0 10px, transparent 10.6px),
  radial-gradient(circle at 72% 10%, rgba(77, 163, 255, 0.751) 0 4px, transparent 4.6px),
  radial-gradient(circle at 84% 68%, rgba(77, 163, 255, 0.761) 0 3px, transparent 3.6px),
  radial-gradient(circle at 73% 2%, rgba(255, 228, 77, 0.689) 0 8px, transparent 8.6px),
  radial-gradient(circle at 69% 99%, rgba(77, 255, 184, 0.829) 0 7px, transparent 7.6px),
  radial-gradient(circle at 49% 86%, rgba(255, 184, 77, 0.712) 0 5px, transparent 5.6px),
  radial-gradient(circle at 62% 40%, rgba(166, 77, 255, 0.754) 0 6px, transparent 6.6px);
  background-repeat: no-repeat;
  background-size: cover;
}

raw: radial-gradient(circle at 44% 49%, rgba(77, 255, 184, 0.736) 0 4px, transparent 4.6px), radial-gradient(circle at 15% 88%, rgba(255, 228, 77, 0.789) 0 6px, transparent 6.6px), radial-gradient(circle at 98% 66%, rgba(255, 77, 77, 0.798) 0 5px, transparent 5.6px), radial-gradient(circle at 11% 48%, rgba(166, 77, 255, 0.81) 0 4px, transparent 4.6px), radial-gradient(circle at 24% 78%, rgba(77, 255, 184, 0.65) 0 6px, transparent 6.6px), radial-gradient(circle at 65% 28%, rgba(166, 77, 255, 0.774) 0 8px, transparent 8.6px), radial-gradient(circle at 95% 88%, rgba(166, 77, 255, 0.68) 0 3px, transparent 3.6px), radial-gradient(circle at 2% 46%, rgba(255, 184, 77, 0.83) 0 7px, transparent 7.6px), radial-gradient(circle at 88% 2%, rgba(255, 184, 77, 0.811) 0 9px, transparent 9.6px), radial-gradient(circle at 10% 18%, rgba(255, 184, 77, 0.685) 0 9px, transparent 9.6px), radial-gradient(circle at 92% 87%, rgba(255, 77, 77, 0.715) 0 4px, transparent 4.6px), radial-gradient(circle at 50% 85%, rgba(166, 77, 255, 0.668) 0 6px, transparent 6.6px), radial-gradient(circle at 27% 45%, rgba(77, 163, 255, 0.762) 0 10px, transparent 10.6px), radial-gradient(circle at 21% 46%, rgba(166, 77, 255, 0.647) 0 7px, transparent 7.6px), radial-gradient(circle at 43% 86%, rgba(77, 255, 184, 0.847) 0 4px, transparent 4.6px), radial-gradient(circle at 69% 3%, rgba(255, 228, 77, 0.661) 0 9px, transparent 9.6px), radial-gradient(circle at 43% 3%, rgba(255, 77, 77, 0.708) 0 3px, transparent 3.6px), radial-gradient(circle at 39% 64%, rgba(77, 163, 255, 0.673) 0 3px, transparent 3.6px), radial-gradient(circle at 32% 61%, rgba(255, 77, 77, 0.731) 0 7px, transparent 7.6px), radial-gradient(circle at 41% 81%, rgba(255, 77, 77, 0.651) 0 5px, transparent 5.6px), radial-gradient(circle at 52% 66%, rgba(255, 77, 77, 0.643) 0 7px, transparent 7.6px), radial-gradient(circle at 90% 93%, rgba(255, 77, 77, 0.652) 0 8px, transparent 8.6px), radial-gradient(circle at 52% 21%, rgba(77, 163, 255, 0.799) 0 5px, transparent 5.6px), radial-gradient(circle at 96% 50%, rgba(255, 184, 77, 0.673) 0 8px, transparent 8.6px), radial-gradient(circle at 28% 33%, rgba(255, 228, 77, 0.812) 0 4px, transparent 4.6px), radial-gradient(circle at 81% 100%, rgba(77, 163, 255, 0.697) 0 3px, transparent 3.6px), radial-gradient(circle at 32% 43%, rgba(166, 77, 255, 0.747) 0 5px, transparent 5.6px), radial-gradient(circle at 58% 21%, rgba(255, 228, 77, 0.789) 0 10px, transparent 10.6px), radial-gradient(circle at 98% 17%, rgba(255, 184, 77, 0.747) 0 6px, transparent 6.6px), radial-gradient(circle at 58% 63%, rgba(255, 184, 77, 0.659) 0 8px, transparent 8.6px), radial-gradient(circle at 18% 81%, rgba(166, 77, 255, 0.696) 0 3px, transparent 3.6px), radial-gradient(circle at 59% 26%, rgba(255, 184, 77, 0.745) 0 10px, transparent 10.6px), radial-gradient(circle at 96% 45%, rgba(166, 77, 255, 0.734) 0 6px, transparent 6.6px), radial-gradient(circle at 61% 88%, rgba(255, 184, 77, 0.749) 0 10px, transparent 10.6px), radial-gradient(circle at 40% 22%, rgba(77, 255, 184, 0.74) 0 3px, transparent 3.6px), radial-gradient(circle at 24% 93%, rgba(255, 228, 77, 0.69) 0 3px, transparent 3.6px), radial-gradient(circle at 17% 32%, rgba(166, 77, 255, 0.656) 0 5px, transparent 5.6px), radial-gradient(circle at 55% 56%, rgba(255, 77, 77, 0.843) 0 6px, transparent 6.6px), radial-gradient(circle at 46% 1%, rgba(255, 77, 77, 0.844) 0 3px, transparent 3.6px), radial-gradient(circle at 72% 18%, rgba(166, 77, 255, 0.748) 0 8px, transparent 8.6px), radial-gradient(circle at 8% 56%, rgba(255, 228, 77, 0.74) 0 8px, transparent 8.6px), radial-gradient(circle at 60% 62%, rgba(255, 77, 77, 0.794) 0 7px, transparent 7.6px), radial-gradient(circle at 79% 28%, rgba(166, 77, 255, 0.808) 0 5px, transparent 5.6px), radial-gradient(circle at 9% 2%, rgba(77, 163, 255, 0.67) 0 6px, transparent 6.6px), radial-gradient(circle at 36% 76%, rgba(77, 255, 184, 0.734) 0 9px, transparent 9.6px), radial-gradient(circle at 72% 40%, rgba(255, 228, 77, 0.739) 0 10px, transparent 10.6px), radial-gradient(circle at 46% 55%, rgba(166, 77, 255, 0.664) 0 7px, transparent 7.6px), radial-gradient(circle at 34% 96%, rgba(255, 77, 77, 0.804) 0 3px, transparent 3.6px), radial-gradient(circle at 31% 25%, rgba(77, 163, 255, 0.815) 0 6px, transparent 6.6px), radial-gradient(circle at 85% 86%, rgba(255, 77, 77, 0.847) 0 4px, transparent 4.6px), radial-gradient(circle at 54% 46%, rgba(77, 255, 184, 0.778) 0 4px, transparent 4.6px), radial-gradient(circle at 49% 30%, rgba(255, 228, 77, 0.795) 0 9px, transparent 9.6px), radial-gradient(circle at 64% 94%, rgba(77, 255, 184, 0.728) 0 3px, transparent 3.6px), radial-gradient(circle at 99% 81%, rgba(255, 184, 77, 0.696) 0 7px, transparent 7.6px), radial-gradient(circle at 65% 85%, rgba(255, 228, 77, 0.717) 0 4px, transparent 4.6px), radial-gradient(circle at 100% 63%, rgba(77, 163, 255, 0.651) 0 8px, transparent 8.6px), radial-gradient(circle at 84% 88%, rgba(255, 77, 77, 0.749) 0 10px, transparent 10.6px), radial-gradient(circle at 5% 38%, rgba(255, 184, 77, 0.718) 0 6px, transparent 6.6px), radial-gradient(circle at 42% 45%, rgba(255, 184, 77, 0.705) 0 10px, transparent 10.6px), radial-gradient(circle at 71% 86%, rgba(77, 163, 255, 0.743) 0 3px, transparent 3.6px), radial-gradient(circle at 88% 48%, rgba(255, 184, 77, 0.718) 0 6px, transparent 6.6px), radial-gradient(circle at 46% 6%, rgba(77, 255, 184, 0.82) 0 3px, transparent 3.6px), radial-gradient(circle at 64% 67%, rgba(77, 163, 255, 0.741) 0 10px, transparent 10.6px), radial-gradient(circle at 36% 97%, rgba(77, 255, 184, 0.81) 0 10px, transparent 10.6px), radial-gradient(circle at 74% 67%, rgba(255, 184, 77, 0.674) 0 6px, transparent 6.6px), radial-gradient(circle at 68% 36%, rgba(255, 184, 77, 0.691) 0 9px, transparent 9.6px), radial-gradient(circle at 91% 42%, rgba(166, 77, 255, 0.739) 0 3px, transparent 3.6px), radial-gradient(circle at 51% 3%, rgba(255, 184, 77, 0.829) 0 3px, transparent 3.6px), radial-gradient(circle at 72% 17%, rgba(166, 77, 255, 0.748) 0 7px, transparent 7.6px), radial-gradient(circle at 70% 27%, rgba(255, 228, 77, 0.788) 0 7px, transparent 7.6px), radial-gradient(circle at 89% 46%, rgba(77, 163, 255, 0.694) 0 8px, transparent 8.6px), radial-gradient(circle at 71% 90%, rgba(77, 255, 184, 0.83) 0 6px, transparent 6.6px), radial-gradient(circle at 92% 20%, rgba(255, 228, 77, 0.796) 0 7px, transparent 7.6px), radial-gradient(circle at 35% 80%, rgba(255, 184, 77, 0.767) 0 3px, transparent 3.6px), radial-gradient(circle at 95% 12%, rgba(255, 77, 77, 0.693) 0 9px, transparent 9.6px), radial-gradient(circle at 49% 33%, rgba(77, 163, 255, 0.747) 0 6px, transparent 6.6px), radial-gradient(circle at 81% 72%, rgba(255, 184, 77, 0.827) 0 3px, transparent 3.6px), radial-gradient(circle at 21% 58%, rgba(255, 184, 77, 0.766) 0 5px, transparent 5.6px), radial-gradient(circle at 100% 33%, rgba(77, 255, 184, 0.828) 0 10px, transparent 10.6px), radial-gradient(circle at 62% 42%, rgba(255, 228, 77, 0.69) 0 10px, transparent 10.6px), radial-gradient(circle at 74% 5%, rgba(77, 255, 184, 0.78) 0 9px, transparent 9.6px), radial-gradient(circle at 87% 21%, rgba(255, 184, 77, 0.726) 0 7px, transparent 7.6px), radial-gradient(circle at 13% 78%, rgba(77, 255, 184, 0.804) 0 7px, transparent 7.6px), radial-gradient(circle at 50% 12%, rgba(255, 184, 77, 0.662) 0 10px, transparent 10.6px), radial-gradient(circle at 72% 10%, rgba(77, 163, 255, 0.751) 0 4px, transparent 4.6px), radial-gradient(circle at 84% 68%, rgba(77, 163, 255, 0.761) 0 3px, transparent 3.6px), radial-gradient(circle at 73% 2%, rgba(255, 228, 77, 0.689) 0 8px, transparent 8.6px), radial-gradient(circle at 69% 99%, rgba(77, 255, 184, 0.829) 0 7px, transparent 7.6px), radial-gradient(circle at 49% 86%, rgba(255, 184, 77, 0.712) 0 5px, transparent 5.6px), radial-gradient(circle at 62% 40%, rgba(166, 77, 255, 0.754) 0 6px, transparent 6.6px) preview height: 360 base color: #0F172A

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator efektu konfetti — animacja konfetti dla stron internetowych

Generator efektu konfetti tworzy konfigurowalną animację konfetti do stron internetowych — skonfiguruj kolory, kształty, liczbę cząsteczek i fizykę. Wygeneruj gotowy kod HTML/JavaScript do wklejenia lub pobierz bibliotekę konfetti.

Zastosowania animacji konfetti

Efekt konfetti to celebracja sukcesu — używana w: stronach z podziękowaniem po rejestracji lub zakupie (thank you page), po ukończeniu kursu lub quizu, przy osiągnięciu wyznaczonego celu (gamifikacja aplikacji), w powiadomieniach o wygranej nagrodzie, podczas transmisji live (streamy, webinary), na urodzinowych lub świątecznych stronach eventowych. Psychologicznie — konfetti wyzwala endorfiny i kojarzy się z sukcesem, co wzmacnia pozytywne doświadczenie użytkownika z produktem (UX delight).

Biblioteki JavaScript do konfetti

canvas-confetti (najpopularniejsza) — npm: npm install canvas-confetti lub CDN. Używa Canvas API, lekka (30 KB), aktywnie rozwijana. API: confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });. party.js — efekty celebration, konfetti, sparkles. Wsparcie TypeScript. JSConfetti — minimalistyczna, obsługuje emoji jako konfetti. Fireworks-js — jeśli potrzebujesz fajerwerków zamiast konfetti. Generator pozwala skonfigurować parametry i wygenerować kod dla canvas-confetti — najpopularniejszego i najbardziej kompatybilnego rozwiązania.

Parametry konfiguracji konfetti

Kluczowe parametry canvas-confetti: particleCount — liczba cząsteczek (domyślnie 50, efektowne 200+), spread — kąt rozproszenia w stopniach (domyślnie 70°), startVelocity — prędkość początkowa, decay — zanikanie prędkości (0–1, domyślnie 0.9), gravity — grawitacja (1 = normalna, 0 = brak), ticks — czas animacji w klatkach, colors — tablica kolorów hex, shapes — kształty: "square", "circle", "star". origin — punkt startowy {x: 0–1, y: 0–1}. Generator tworzy kod z Twoją konfiguracją.

Konfiguracja zaawansowana — efekty specjalne

Kilka efektów specjalnych: Kanony konfetti — sekwencyjne wystrzelenia z lewej i prawej strony: confetti({...origin: {x: 0}}); i confetti({...origin: {x: 1}}); z timoutem. Deszcz konfetti — ciągłe opady z góry strony przez 3 sekundy (requestAnimationFrame loop). Emoji konfetti — JSConfetti: jsConfetti.addConfetti({ emojis: ['🎉', '🥳', '🎊', '⭐'] });. Eksplozja centralna — jednorazowy wybuch z centrum z dużą liczbą cząsteczek.

Najczęściej zadawane pytania

Jak uruchomić konfetti po kliknięciu przycisku?

<button onclick="startConfetti()">Świętuj!</button> i JS: function startConfetti() { confetti({ particleCount: 200, spread: 80, origin: { y: 0.6 } }); }. Pamiętaj o załadowaniu biblioteki: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>. Generator tworzy kompletny działający snippet HTML+JS.

Jak dostosować kolory konfetti do palety marki?

confetti({ colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'] });. Kolory podajesz jako tablica hex. Dla gradientu marki użyj kilku odcieni głównego koloru. Możesz też użyć emoji jako konfetti w JSConfetti co daje dowolne "kolory" poprzez wybór emoji. Generator ma picker kolorów do wizualnego wyboru palety.

Czy efekt konfetti wpływa negatywnie na wydajność strony?

Canvas-confetti jest zoptymalizowana i nie powinna znacząco wpływać na wydajność. Wskazówki: ogranicz particleCount (200 to maksimum dla płynnej animacji na słabszych urządzeniach), używaj ticks do ograniczenia czasu animacji, po zakończeniu animacji wywołaj confetti.reset() dla zwolnienia pamięci, na urządzeniach mobilnych rozważ zmniejszenie particleCount o 50%. Biblioteka używa Canvas API i requestAnimationFrame — nie blokuje main thread.

Jak dodać konfetti do formularza po jego wysłaniu?

Przykład z fetch: form.addEventListener('submit', async (e) => { e.preventDefault(); const res = await fetch('/api/submit', {method: 'POST', body: new FormData(form)}); if (res.ok) { confetti({particleCount: 150, spread: 80}); showSuccessMessage(); } });. Sprawdzaj ok status przed odpaleniem konfetti — nie świętuj błędów!

Czy można zrobić konfetti bez JavaScript?

CSS-only konfetti: możliwe przez animacje CSS z wieloma pseudo-elementami, ale bardzo ograniczone (statyczna pozycja startowa, brak fizyki, trudne w utrzymaniu). Lepsze rozwiązanie dla prostych efektów: animowane GIF lub Lottie animation (lekki format animacji JSON). Dla pełnego efektu konfetti z fizyką grawitacji i losowością — JavaScript jest niezbędny.