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

Cząsteczek

plamek konfetti na tle

Kolorów w palecie

Rozmiar cząstek

3–10 px

Krycie

0,85

finalne krycie losowane w zakresie 75–100% tej wartości

Wysokość podglądu

360 px

Ziarno

202602

to samo ziarno = identyczny wzór

.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

Ściąga: opcje konfiguracji silnika konfetti

Parametr	Zakres (walidacja)	Domyślnie	Za co odpowiada
Gęstość	10–220	90	liczba plamek konfetti rozrzuconych na tle
Minimalny rozmiar	1–24	3	dolna granica średnicy plamki
Maksymalny rozmiar	2–40	10	górna granica średnicy plamki
Krycie / przezroczystość	0,05–1,00	0,85	bazowe krycie — silnik losuje finalne w zakresie 75–100% tej wartości
Paleta kolorów (oddzielone przecinkami)	tekst / kolor	6 kolorów	kolory plamek (#RRGGBB); poniżej dwóch poprawnych użyta zostanie paleta zapasowa
Kolor tła	tekst / kolor	#0F172A	kolor tła pod plamkami
Ziarno losowości (seed)	0–999 999	202 602	ziarno losowości — to samo ziarno daje identyczny wzór
Wysokość podglądu (px)	160–520	360	wysokość boxu podglądu na stronie

Kształt plamki to zawsze koło (radial-gradient), a efekt jest statycznym tłem CSS — silnik nie generuje animacji ani innych kształtów.

Ściąga: jak powstaje wzór (z kodu silnika)

Etap	Co robi silnik
Ziarno	Przed losowaniem silnik ustawia generator liczb losowych na ziarno (mt_srand), dlatego to samo ziarno przy tych samych ustawieniach daje identyczny wzór.
Pozycja plamki	Współrzędne x i y każdej plamki losowane są niezależnie z zakresu 0–100% powierzchni tła.
Rozmiar i kolor	Średnica losowana jest z podanego zakresu (min–max px), a kolor — z palety; przy mniej niż dwóch poprawnych kolorach #RRGGBB silnik używa palety zapasowej (6 kolorów).
Krycie plamki	Finalna przezroczystość to bazowe krycie pomnożone przez współczynnik 0,75–1,0 (ale nie mniej niż 0,05) — dzięki temu plamki nie wyglądają identycznie.
Wynik	CSS klasy .confetti-bg: background-color (kolor tła) + background-image z 90 warstwami radial-gradient, background-repeat: no-repeat i background-size: cover.

Warto wiedzieć — konfetti w czystym CSS

Statyczne tło, nie animacja

Generator buduje wzór z gradientów radialnych w czystym CSS — bez JavaScript i bez canvas. Nic się nie rusza, strona zostaje lekka, a gotowy kod wystarczy wkleić do własnego arkusza stylów i dopisać klasę .confetti-bg do wybranego elementu.

To samo ziarno = ten sam wzór

Rozmieszczenie plamek zależy wyłącznie od ziarna: wpisując tę samą liczbę, odtworzysz wzór co do piksela — przydatne, gdy projekt wraca do wersji „sprawdzonej”. Chcesz inny układ przy zachowanej palecie? Zmień tylko ziarno o 1.

Dostępność i ograniczony ruch

Wzór jest statyczny, więc sam z siebie nie zasysa uwagi i nie wymaga wyjątku prefers-reduced-motion. Gdybyś jednak rozbudował go o animację (np. powolne przesuwanie tła), wyłącz ją dla osób z redukcją ruchu przez media query @media (prefers-reduced-motion: reduce).

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.