CSS 색종이 생성기

색종이 애니메이션을 디자인하고 가벼운 HTML, CSS, JS를 복사하세요

조각

색상

1~8개 색상을 쓸 수 있으며 조각마다 하나씩 사용합니다.

80
6px
12px
100%

미리보기

조각 80개 · 시드 42

출력

/* CSS Confetti · falling · 80 pieces · seed 42 */
.confetti {
  --confetti-fall: 115cqh;
  --confetti-opacity: 1;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

.confetti-piece {
  position: absolute;
  left: var(--x);
  top: -24px;
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: var(--br, 1px);
  opacity: 0;
  will-change: transform, opacity;
  animation: confetti-falling var(--dur) linear var(--delay) infinite both;
}

@keyframes confetti-falling {
  0% { opacity: var(--confetti-opacity); transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0deg); }
  50% { transform: translate3d(var(--sway), calc(var(--confetti-fall) * 0.5), 0) rotate3d(1, 1, 0, calc(var(--r) * 0.5)); }
  100% { opacity: var(--confetti-opacity); transform: translate3d(0, var(--confetti-fall), 0) rotate3d(1, 1, 0, var(--r)); }
}

.confetti-piece:nth-child(1) { --x: 62.47%; --w: 10px; --h: 10px; --c: #6a4c93; --r: 334deg; --sway: -3.63cqw; --dur: 4.05s; --delay: 2.6s; }
.confetti-piece:nth-child(2) { --x: 68.66%; --w: 9px; --h: 4px; --c: #6a4c93; --r: 396deg; --sway: 0.01cqw; --dur: 3.39s; --delay: 1.83s; }
.confetti-piece:nth-child(3) { --x: 6.18%; --w: 6px; --h: 6px; --c: #6a4c93; --r: -529deg; --sway: -3.73cqw; --dur: 3.06s; --delay: 0.56s; }
.confetti-piece:nth-child(4) { --x: 31.95%; --w: 11px; --h: 11px; --c: #ff595e; --r: -646deg; --sway: 4.94cqw; --dur: 3.98s; --delay: 1.35s; }
.confetti-piece:nth-child(5) { --x: 30.36%; --w: 6px; --h: 3px; --c: #8ac926; --r: 367deg; --sway: -4.65cqw; --dur: 4.29s; --delay: 2.22s; }
.confetti-piece:nth-child(6) { --x: 68.08%; --w: 11px; --h: 11px; --c: #ffca3a; --r: -389deg; --sway: 2.56cqw; --dur: 3.15s; --delay: 2.08s; }
.confetti-piece:nth-child(7) { --x: 1.58%; --w: 12px; --h: 5px; --c: #6a4c93; --r: -693deg; --sway: -6.22cqw; --dur: 3.27s; --delay: 1.08s; }
.confetti-piece:nth-child(8) { --x: 70.66%; --w: 9px; --h: 9px; --c: #6a4c93; --r: -589deg; --sway: -3.55cqw; --dur: 4.87s; --delay: 0.54s; }
.confetti-piece:nth-child(9) { --x: 57.85%; --w: 9px; --h: 9px; --c: #ff595e; --br: 50%; --r: 515deg; --sway: -1.06cqw; --dur: 4.83s; --delay: 1.01s; }
.confetti-piece:nth-child(10) { --x: 99.4%; --w: 10px; --h: 5px; --c: #1982c4; --r: -462deg; --sway: 3.12cqw; --dur: 4.69s; --delay: 2.67s; }
.confetti-piece:nth-child(11) { --x: 90.48%; --w: 9px; --h: 9px; --c: #ffca3a; --r: -578deg; --sway: 4.58cqw; --dur: 3.63s; --delay: 0.28s; }
.confetti-piece:nth-child(12) { --x: 22.32%; --w: 9px; --h: 9px; --c: #ff595e; --br: 50%; --r: 335deg; --sway: 3.2cqw; --dur: 4.42s; --delay: 1.24s; }
.confetti-piece:nth-child(13) { --x: 79.24%; --w: 7px; --h: 7px; --c: #ffca3a; --r: -546deg; --sway: -2.78cqw; --dur: 4.77s; --delay: 1.18s; }
.confetti-piece:nth-child(14) { --x: 90.82%; --w: 7px; --h: 7px; --c: #ffca3a; --br: 50%; --r: -597deg; --sway: 6.01cqw; --dur: 4.27s; --delay: 0.63s; }
.confetti-piece:nth-child(15) { --x: 27.55%; --w: 10px; --h: 10px; --c: #ff595e; --r: -582deg; --sway: -3.34cqw; --dur: 4.42s; --delay: 1.01s; }
.confetti-piece:nth-child(16) { --x: 56.1%; --w: 6px; --h: 3px; --c: #6a4c93; --r: 715deg; --sway: -5.27cqw; --dur: 3.33s; --delay: 0.88s; }
.confetti-piece:nth-child(17) { --x: 32.73%; --w: 8px; --h: 8px; --c: #8ac926; --r: 439deg; --sway: 6.33cqw; --dur: 3.67s; --delay: 1.49s; }
.confetti-piece:nth-child(18) { --x: 66.93%; --w: 10px; --h: 10px; --c: #8ac926; --r: -404deg; --sway: -2.87cqw; --dur: 3.6s; --delay: 0.66s; }
.confetti-piece:nth-child(19) { --x: 20.77%; --w: 7px; --h: 7px; --c: #ffca3a; --br: 50%; --r: -399deg; --sway: 1.24cqw; --dur: 3.08s; --delay: 1.44s; }
.confetti-piece:nth-child(20) { --x: 52.57%; --w: 8px; --h: 8px; --c: #6a4c93; --br: 50%; --r: 458deg; --sway: 5.88cqw; --dur: 3.31s; --delay: 2.52s; }
.confetti-piece:nth-child(21) { --x: 54.57%; --w: 11px; --h: 11px; --c: #ff595e; --r: 630deg; --sway: -1.77cqw; --dur: 3.42s; --delay: 2.95s; }
.confetti-piece:nth-child(22) { --x: 50.65%; --w: 9px; --h: 9px; --c: #6a4c93; --br: 50%; --r: 277deg; --sway: -5.29cqw; --dur: 3.14s; --delay: 2.03s; }
.confetti-piece:nth-child(23) { --x: 35.11%; --w: 11px; --h: 11px; --c: #6a4c93; --br: 50%; --r: 644deg; --sway: 1.59cqw; --dur: 4.71s; --delay: 1.34s; }
.confetti-piece:nth-child(24) { --x: 15.16%; --w: 11px; --h: 11px; --c: #ffca3a; --br: 50%; --r: 545deg; --sway: 5.51cqw; --dur: 3.66s; --delay: 1.1s; }
.confetti-piece:nth-child(25) { --x: 70.75%; --w: 6px; --h: 3px; --c: #1982c4; --r: 699deg; --sway: -0.54cqw; --dur: 4.76s; --delay: 0.44s; }
.confetti-piece:nth-child(26) { --x: 79.36%; --w: 8px; --h: 4px; --c: #ff595e; --r: -458deg; --sway: 3.46cqw; --dur: 4.14s; --delay: 2.35s; }
.confetti-piece:nth-child(27) { --x: 33.19%; --w: 7px; --h: 7px; --c: #8ac926; --r: -472deg; --sway: -1.2cqw; --dur: 3.92s; --delay: 0.92s; }
.confetti-piece:nth-child(28) { --x: 13.48%; --w: 7px; --h: 7px; --c: #ffca3a; --r: 508deg; --sway: -1cqw; --dur: 4.29s; --delay: 0.01s; }
.confetti-piece:nth-child(29) { --x: 82.17%; --w: 7px; --h: 7px; --c: #ff595e; --br: 50%; --r: 453deg; --sway: -6.42cqw; --dur: 4s; --delay: 0.17s; }
.confetti-piece:nth-child(30) { --x: 66.12%; --w: 8px; --h: 4px; --c: #1982c4; --r: 296deg; --sway: 4cqw; --dur: 4.93s; --delay: 2.39s; }
.confetti-piece:nth-child(31) { --x: 26.28%; --w: 9px; --h: 9px; --c: #8ac926; --br: 50%; --r: -289deg; --sway: -7.05cqw; --dur: 3.19s; --delay: 2.02s; }
.confetti-piece:nth-child(32) { --x: 83.31%; --w: 10px; --h: 10px; --c: #6a4c93; --r: -438deg; --sway: -3.45cqw; --dur: 3.68s; --delay: 1.61s; }
.confetti-piece:nth-child(33) { --x: 68.5%; --w: 7px; --h: 7px; --c: #6a4c93; --br: 50%; --r: -495deg; --sway: 6.97cqw; --dur: 4.72s; --delay: 1.71s; }
.confetti-piece:nth-child(34) { --x: 54.6%; --w: 11px; --h: 5px; --c: #8ac926; --r: 509deg; --sway: 0.87cqw; --dur: 4.37s; --delay: 2.9s; }
.confetti-piece:nth-child(35) { --x: 87.79%; --w: 12px; --h: 12px; --c: #ffca3a; --br: 50%; --r: 565deg; --sway: -1.81cqw; --dur: 4.73s; --delay: 0.95s; }
.confetti-piece:nth-child(36) { --x: 69.15%; --w: 11px; --h: 11px; --c: #ffca3a; --r: 644deg; --sway: 5.88cqw; --dur: 4.24s; --delay: 0.45s; }
.confetti-piece:nth-child(37) { --x: 71.48%; --w: 8px; --h: 8px; --c: #8ac926; --br: 50%; --r: -547deg; --sway: 3.81cqw; --dur: 4.54s; --delay: 0.56s; }
.confetti-piece:nth-child(38) { --x: 67.53%; --w: 11px; --h: 11px; --c: #8ac926; --br: 50%; --r: -286deg; --sway: 6.29cqw; --dur: 4s; --delay: 1.26s; }
.confetti-piece:nth-child(39) { --x: 12.12%; --w: 9px; --h: 9px; --c: #1982c4; --r: 272deg; --sway: -6.44cqw; --dur: 3.34s; --delay: 1.13s; }
.confetti-piece:nth-child(40) { --x: 26.97%; --w: 11px; --h: 11px; --c: #1982c4; --br: 50%; --r: -267deg; --sway: 3.2cqw; --dur: 3.54s; --delay: 2.57s; }
.confetti-piece:nth-child(41) { --x: 48.02%; --w: 10px; --h: 10px; --c: #6a4c93; --br: 50%; --r: -299deg; --sway: -4.16cqw; --dur: 4.25s; --delay: 0.84s; }
.confetti-piece:nth-child(42) { --x: 68.91%; --w: 8px; --h: 8px; --c: #8ac926; --br: 50%; --r: -529deg; --sway: 4.51cqw; --dur: 3.22s; --delay: 2.76s; }
.confetti-piece:nth-child(43) { --x: 58.12%; --w: 7px; --h: 3px; --c: #ff595e; --r: -364deg; --sway: 7.85cqw; --dur: 3.46s; --delay: 2.52s; }
.confetti-piece:nth-child(44) { --x: 78.55%; --w: 8px; --h: 8px; --c: #ff595e; --r: 626deg; --sway: -4.73cqw; --dur: 3.75s; --delay: 1.52s; }
.confetti-piece:nth-child(45) { --x: 95.16%; --w: 7px; --h: 3px; --c: #1982c4; --r: -659deg; --sway: -0.1cqw; --dur: 4.58s; --delay: 0.53s; }
.confetti-piece:nth-child(46) { --x: 65.99%; --w: 7px; --h: 7px; --c: #1982c4; --r: -612deg; --sway: -5.84cqw; --dur: 3.48s; --delay: 1.81s; }
.confetti-piece:nth-child(47) { --x: 58.04%; --w: 9px; --h: 4px; --c: #6a4c93; --r: 601deg; --sway: 7.32cqw; --dur: 3.1s; --delay: 0.85s; }
.confetti-piece:nth-child(48) { --x: 18.26%; --w: 6px; --h: 3px; --c: #1982c4; --r: 369deg; --sway: -0.71cqw; --dur: 4.73s; --delay: 1.93s; }
.confetti-piece:nth-child(49) { --x: 47.16%; --w: 9px; --h: 4px; --c: #6a4c93; --r: -316deg; --sway: -4.61cqw; --dur: 4.99s; --delay: 1.53s; }
.confetti-piece:nth-child(50) { --x: 20.49%; --w: 10px; --h: 10px; --c: #1982c4; --r: -710deg; --sway: -2.46cqw; --dur: 4.66s; --delay: 1.55s; }
.confetti-piece:nth-child(51) { --x: 36.36%; --w: 11px; --h: 11px; --c: #8ac926; --r: -486deg; --sway: 5.79cqw; --dur: 3.07s; --delay: 1.28s; }
.confetti-piece:nth-child(52) { --x: 65.79%; --w: 8px; --h: 8px; --c: #ff595e; --r: 282deg; --sway: 4.21cqw; --dur: 4.8s; --delay: 2.43s; }
.confetti-piece:nth-child(53) { --x: 57.72%; --w: 6px; --h: 6px; --c: #8ac926; --r: -492deg; --sway: -0.79cqw; --dur: 3.95s; --delay: 0.05s; }
.confetti-piece:nth-child(54) { --x: 27.9%; --w: 10px; --h: 5px; --c: #1982c4; --r: -425deg; --sway: 6.9cqw; --dur: 4.45s; --delay: 1.85s; }
.confetti-piece:nth-child(55) { --x: 75.38%; --w: 11px; --h: 11px; --c: #ff595e; --r: 484deg; --sway: -0.51cqw; --dur: 3.88s; --delay: 0.36s; }
.confetti-piece:nth-child(56) { --x: 6.22%; --w: 10px; --h: 10px; --c: #6a4c93; --r: 476deg; --sway: 6.57cqw; --dur: 3.02s; --delay: 1.55s; }
.confetti-piece:nth-child(57) { --x: 97.95%; --w: 9px; --h: 9px; --c: #8ac926; --br: 50%; --r: 651deg; --sway: 7.75cqw; --dur: 4.33s; --delay: 2.9s; }
.confetti-piece:nth-child(58) { --x: 49.12%; --w: 11px; --h: 11px; --c: #6a4c93; --br: 50%; --r: -294deg; --sway: -7.44cqw; --dur: 4.99s; --delay: 2.62s; }
.confetti-piece:nth-child(59) { --x: 25.05%; --w: 10px; --h: 10px; --c: #ffca3a; --br: 50%; --r: 464deg; --sway: 2.49cqw; --dur: 4.85s; --delay: 0.47s; }
.confetti-piece:nth-child(60) { --x: 63.54%; --w: 8px; --h: 8px; --c: #ff595e; --br: 50%; --r: -364deg; --sway: -2.01cqw; --dur: 4.24s; --delay: 2.92s; }
.confetti-piece:nth-child(61) { --x: 59.24%; --w: 8px; --h: 8px; --c: #1982c4; --br: 50%; --r: -572deg; --sway: -3.93cqw; --dur: 4.75s; --delay: 2.7s; }
.confetti-piece:nth-child(62) { --x: 99.58%; --w: 9px; --h: 9px; --c: #6a4c93; --r: 399deg; --sway: 0.47cqw; --dur: 3.93s; --delay: 0.52s; }
.confetti-piece:nth-child(63) { --x: 39.19%; --w: 10px; --h: 5px; --c: #1982c4; --r: 455deg; --sway: 5.36cqw; --dur: 4.19s; --delay: 1.77s; }
.confetti-piece:nth-child(64) { --x: 63.02%; --w: 7px; --h: 7px; --c: #ff595e; --br: 50%; --r: 583deg; --sway: 0.75cqw; --dur: 4.13s; --delay: 2.69s; }
.confetti-piece:nth-child(65) { --x: 52.39%; --w: 11px; --h: 5px; --c: #ff595e; --r: -678deg; --sway: -7.45cqw; --dur: 3s; --delay: 0.17s; }
.confetti-piece:nth-child(66) { --x: 74.26%; --w: 10px; --h: 10px; --c: #ff595e; --r: -639deg; --sway: -4.83cqw; --dur: 3.69s; --delay: 1.96s; }
.confetti-piece:nth-child(67) { --x: 41.12%; --w: 6px; --h: 6px; --c: #8ac926; --r: 523deg; --sway: 1.41cqw; --dur: 3.83s; --delay: 1.77s; }
.confetti-piece:nth-child(68) { --x: 43.1%; --w: 7px; --h: 3px; --c: #1982c4; --r: 384deg; --sway: 7.09cqw; --dur: 4.85s; --delay: 1.79s; }
.confetti-piece:nth-child(69) { --x: 50.85%; --w: 8px; --h: 8px; --c: #6a4c93; --r: 576deg; --sway: 6.55cqw; --dur: 3.69s; --delay: 2.75s; }
.confetti-piece:nth-child(70) { --x: 65.18%; --w: 7px; --h: 3px; --c: #ffca3a; --r: 489deg; --sway: -7.66cqw; --dur: 4.95s; --delay: 1.81s; }
.confetti-piece:nth-child(71) { --x: 38.98%; --w: 12px; --h: 5px; --c: #6a4c93; --r: -695deg; --sway: 0.2cqw; --dur: 3.61s; --delay: 0.65s; }
.confetti-piece:nth-child(72) { --x: 17.62%; --w: 8px; --h: 8px; --c: #1982c4; --br: 50%; --r: -491deg; --sway: -0.86cqw; --dur: 3.73s; --delay: 1.71s; }
.confetti-piece:nth-child(73) { --x: 63.09%; --w: 11px; --h: 11px; --c: #8ac926; --r: 527deg; --sway: -0.9cqw; --dur: 4.71s; --delay: 1.36s; }
.confetti-piece:nth-child(74) { --x: 38.21%; --w: 10px; --h: 10px; --c: #1982c4; --r: -333deg; --sway: 3.36cqw; --dur: 3.01s; --delay: 0.98s; }
.confetti-piece:nth-child(75) { --x: 13.66%; --w: 6px; --h: 3px; --c: #1982c4; --r: -272deg; --sway: 3.2cqw; --dur: 3.92s; --delay: 2.13s; }
.confetti-piece:nth-child(76) { --x: 81.59%; --w: 7px; --h: 3px; --c: #1982c4; --r: -416deg; --sway: -0.52cqw; --dur: 4.23s; --delay: 0.25s; }
.confetti-piece:nth-child(77) { --x: 66.13%; --w: 7px; --h: 7px; --c: #6a4c93; --r: 698deg; --sway: -5.21cqw; --dur: 3.93s; --delay: 1.84s; }
.confetti-piece:nth-child(78) { --x: 17.38%; --w: 11px; --h: 11px; --c: #8ac926; --br: 50%; --r: -328deg; --sway: 1.17cqw; --dur: 4.8s; --delay: 0.1s; }
.confetti-piece:nth-child(79) { --x: 67.51%; --w: 11px; --h: 5px; --c: #8ac926; --r: 532deg; --sway: 0.41cqw; --dur: 4.95s; --delay: 1.57s; }
.confetti-piece:nth-child(80) { --x: 53.62%; --w: 11px; --h: 11px; --c: #ff595e; --br: 50%; --r: -683deg; --sway: 3.25cqw; --dur: 3.78s; --delay: 1.32s; }

/* Visitors who ask for reduced motion see no confetti. */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    animation: none;
    display: none;
  }
}

움직임

코드 종류

조각을 HTML에 넣어 페이지가 열릴 때 JavaScript 없이 재생합니다.

조각이 위쪽 가장자리에서 페이지 전체로 떨어집니다.

4 s
100%
115%
8%
720°

같은 시드와 설정은 항상 같은 코드를 만듭니다.

고급
배치

편집하면 미리보기와 코드가 바로 바뀝니다.

관련 도구

CSS Grid 생성기CSS Grid 레이아웃을 시각적으로 만들고 깔끔한 CSS와 HTML을 복사하세요그라데이션 생성기엄선한 CSS 그라데이션을 둘러보거나 선형·방사형·원뿔형 그라데이션 만들기CSS Flexbox 생성기Flexbox 레이아웃을 시각적으로 만들고 CSS, HTML, Tailwind를 복사하세요블롭 생성기재현 가능한 시드로 유기적인 SVG 블롭 만들기
CSS 색종이 생성기란?

색종이 애니메이션을 시각적으로 만드는 도구입니다. 낙하, 폭발, 대포, 배경 중 하나를 고르고 색상, 조각 수, 모양, 크기, 움직임을 정한 뒤 바로 쓸 수 있는 코드를 복사하세요. 미리보기는 복사하는 것과 같은 CSS로 재생됩니다.

사용 방법
  1. 1.효과를 고르거나 프리셋을 불러옵니다.
  2. 2.조각에서 색상, 조각 수, 모양, 크기를 바꿉니다.
  3. 3.움직임에서 재생 시간, 퍼짐, 낙하 거리, 흔들림, 회전을 조정합니다.
  4. 4.장식용이면 CSS만, 성공 후 터뜨릴 효과면 이벤트 시를 고릅니다.
  5. 5.HTML, CSS, 이벤트 시에는 JavaScript까지 복사하거나 다운로드합니다.
재현 가능하고 접근성 있는 코드

시드 기반 생성기가 각 조각을 CSS 사용자 지정 속성으로 쓰므로 같은 시드와 설정은 항상 같은 코드를 만듭니다. 조각은 transform과 opacity만 애니메이션하고, 색종이 레이어는 aria-hidden이며, prefers-reduced-motion 블록이 동작 줄이기를 원하는 방문자에게 색종이를 숨깁니다. 이벤트 시 코드는 애니메이션이 끝나면 조각을 삭제합니다.

제한

조각은 최대 600개이며 300개를 넘으면 성능 경고가 표시됩니다. 크기에 컨테이너 쿼리 단위를 쓰므로 2023년 이후 브라우저가 필요합니다. 설정은 이 브라우저에만 저장됩니다.

CodingTool이 공식 출시되었습니다

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.toolsLaunchpadly Startup DirectoryCodingTool.dev — Featured on Smol Launch