<div class="confetti-wrapper">
  <canvas id="confettiCanvas"></canvas>
  <div class="success-card">
    <div class="check-icon">&#10003;</div>
    <h2>Success!</h2>
    <p>Your action was completed successfully.</p>
    <button id="celebrateBtn">Celebrate Again</button>
  </div>
</div>

.confetti-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  width: 100%;
  height: 400px;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#confettiCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.success-card {
  background: white;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 20;
}
.check-icon {
  width: 60px;
  height: 60px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
button {
  padding: 10px 20px;
  background: #111827;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

const canvas = document.getElementById("confettiCanvas");
const ctx = canvas.getContext("2d");
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;

let confetti = [];
const colors = ["#ef4444", "#3b82f6", "#10b981", "#f59e0b", "#8b5cf6"];

function createConfetti() {
  for (let i = 0; i < 100; i++) {
    confetti.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height - canvas.height,
      color: colors[Math.floor(Math.random() * colors.length)],
      size: Math.random() * 8 + 4,
      speed: Math.random() * 3 + 2,
      angle: Math.random() * 6.2
    });
  }
}

function drawConfetti() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  confetti.forEach((p, index) => {
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
    ctx.fill();
    p.y += p.speed;
    p.x += Math.sin(p.angle) * 2;
    if (p.y > canvas.height) confetti[index].y = -10;
  });
  requestAnimationFrame(drawConfetti);
}

createConfetti();
drawConfetti();

document.getElementById("celebrateBtn").addEventListener("click", () => {
  confetti = [];
  createConfetti();
});

Back to Snippets

Confetti Celebration Effect JS

Celebrate success with this fun confetti animation. We use a canvas to draw colorful falling paper when a task is completed, which adds a delightful moment of joy for your users.

371

#javascript

#css

#confetti

#animation

#canvas

#celebration

#success

#ui

/HTML *CSS ()JS Output Live Updates

const canvas = document.getElementById("confettiCanvas");
const ctx = canvas.getContext("2d");
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;

let confetti = [];
const colors = ["#ef4444", "#3b82f6", "#10b981", "#f59e0b", "#8b5cf6"];

function createConfetti() {
  for (let i = 0; i < 100; i++) {
    confetti.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height - canvas.height,
      color: colors[Math.floor(Math.random() * colors.length)],
      size: Math.random() * 8 + 4,
      speed: Math.random() * 3 + 2,
      angle: Math.random() * 6.2
    });
  }
}

function drawConfetti() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  confetti.forEach((p, index) => {
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
    ctx.fill();
    p.y += p.speed;
    p.x += Math.sin(p.angle) * 2;
    if (p.y > canvas.height) confetti[index].y = -10;
  });
  requestAnimationFrame(drawConfetti);
}

createConfetti();
drawConfetti();

document.getElementById("celebrateBtn").addEventListener("click", () => {
  confetti = [];
  createConfetti();
});