v2.4 — 12 fresh embers added this week

Backgrounds that breathe fire

Light up the web, one background at a time.

A curated, copy-paste gallery of pure CSS animated backgrounds — from crackling campfires to rising embers. Free, lightweight, and ready for your next project.

0KBJavaScript
< 3KBMinified
MITLicense
120+Animations
02 — The Ember Forge

A live sandbox that speaks CSS

Tweak every parameter and watch the animation rebuild in real time. The generated code is yours to keep, fork, and ship.

Live preview 28 particles · 1.0x · warm
CSS · flames
Tip: drag the Glow slider to feel the warmth dial up
28
1.0x
72%
warm
42%
62%
Presets
generated.css 2.08 KB
.ember-bg-live {
  position: relative;
  background: hsl(71, 40%, 0.11);
  overflow: hidden;
  isolation: isolate;
}

.ember-bg-live::before,
.ember-bg-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: ember-flames 3.00s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.ember-bg-live::before {
  background:
    radial-gradient(circle at 50% 80%, hsla(101, 77%, 56%, 0.92) 0%, transparent 38%),
    radial-gradient(circle at 28% 70%, hsla(126, 77%, 56%, 0.6) 0%, transparent 30%),
    radial-gradient(circle at 72% 72%, hsla(86, 77%, 56%, 0.5) 0%, transparent 28%);
  filter: blur(36px);
  mix-blend-mode: screen;
}

.ember-bg-live::after {
  background-image:
    radial-gradient(circle at 20% 88%, hsla(101, 77%, 56%, 0.7) 2px, transparent 3px),
    radial-gradient(circle at 60% 94%, hsla(113, 77%, 56%, 0.6) 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 84%, hsla(93, 77%, 56%, 0.5) 2px, transparent 3px);
  background-size: 60px 80px, 80px 100px, 50px 70px;
  box-shadow:
            0.0px 59.6px 6.0px 1.2px hsla(101, 77%, 56%, 0.85),
            54.5px 12.9px 9.0px 1.8px hsla(111, 77%, 56%, 0.85),
            -14.1px 28.5px 12.0px 2.4px hsla(121, 77%, 56%, 0.85),
            -50.9px 54.4px 6.0px 3.0px hsla(101, 77%, 56%, 0.85),
            27.2px 4.3px 9.0px 1.2px hsla(111, 77%, 56%, 0.85),
            43.9px 45.1px 12.0px 1.8px hsla(121, 77%, 56%, 0.85),
            -38.5px 40.9px 6.0px 2.4px hsla(101, 77%, 56%, 0.85),
            -34.0px 5.7px 9.0px 3.0px hsla(111, 77%, 56%, 0.85),
            47.3px 56.8px 12.0px 1.2px hsla(121, 77%, 56%, 0.85),
            21.8px 23.9px 6.0px 1.8px hsla(101, 77%, 56%, 0.85);
  animation-delay: 1.20s;
  opacity: 0.91;
}

@keyframes ember-flames {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  50%  { transform: translateY(-18.4px) scale(1.042); opacity: 1; }
  100% { transform: translateY(-36.8px) scale(1.013); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ember-bg-live::before,
  .ember-bg-live::after { animation: none; }
}
03 — Trusted by builders

CSS that earns its place

120+
Curated animations
45K
Monthly downloads
0KB
JavaScript required
< 3KB
Avg. minified size
04 — How it works

From spark to live site in 3 steps

01 🔥

Browse or Forge

Pick a curated animation or design your own in the live sandbox. Tweak particles, speed, glow, and color until it sings.

02 ⚡

Copy the CSS

One click grabs the production-ready, vendor-prefixed snippet. No build step, no dependencies, no excuses.

03 🚀

Paste & ship

Drop it into any project — HTML, React, Svelte, plain Markdown. It just works. Forever.

05 — Under the hood

Performance-first, by design

Every line of CSS is hand-tuned. No bloat, no JavaScript at runtime, no last-millisecond reflows. Just buttery 60fps warmth.

campfire.css
.campfire {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at center bottom,
      #2a0e08 0%, #0d0906 65%);
  overflow: hidden;
  isolation: isolate;
}

.campfire::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 120px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center bottom,
    rgba(255, 200, 87, 0.95) 0%,
    rgba(255, 106, 26, 0.75) 35%,
    rgba(255, 50, 0, 0.45) 65%,
    transparent 85%);
  border-radius: 50% 50% 25% 25% / 80% 80% 25% 25%;
  filter: blur(8px);
  animation: flicker 2.4s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.campfire::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 88%, rgba(255, 180, 80, 0.7) 1px, transparent 2.5px),
    radial-gradient(circle at 65% 92%, rgba(255, 100, 30, 0.6) 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 80%, rgba(255, 200, 87, 0.5) 1px, transparent 2px);
  background-size: 60px 80px, 80px 100px, 50px 70px;
  animation: embers 5s linear infinite;
  will-change: transform, opacity;
}

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scale(1, 1) translateY(0); opacity: 0.9; }
  25%      { transform: translateX(-50%) scale(1.05, 1.1) translateY(-3px); opacity: 1; }
  50%      { transform: translateX(-50%) scale(0.95, 0.92) translateY(2px); opacity: 0.85; }
  75%      { transform: translateX(-50%) scale(1.08, 1.12) translateY(-5px); opacity: 1; }
}

@keyframes embers {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-140px) translateX(24px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .campfire::before,
  .campfire::after { animation: none; }
}
View on CodePen

Why this stays smooth

  • ◆ GPU-accelerated transforms only — translate, scale, rotate, opacity
  • ◆ No layout thrash — properties are pre-baked into keyframes
  • ◆ Pauses automatically when the tab is hidden
  • ◆ Respects prefers-reduced-motion out of the box
  • ◆ Works in every evergreen browser since 2018
  • ◆ Sub-3KB minified, zero dependencies, zero bloat
Open the Forge

Roll the dice, ship something warm.

06 — Frequently asked

Frequently asked flames

If your question isn't here, ping us on Discord. We answer in under 4 hours, usually with a CodePen.

Yes. Every animation in the gallery is generated with CSS keyframes, gradients, box-shadows, and transforms. No JavaScript at runtime, no canvas, no WebGL. Open DevTools and you will see the proof.
Absolutely. All animations are released under the MIT license. Use them in client work, SaaS products, marketing sites, indie apps — anywhere. Attribution is appreciated but never required.
Yep. The animations use GPU-accelerated transforms and opacity, which are well supported on iOS Safari, Chrome Android, and Samsung Internet. The Forge includes a performance slider so you can dial in the right particle count for low-end devices.
Every animation is built from CSS custom properties at the top of each snippet. Override them in your own stylesheet, or use the Forge to generate a new palette in real time. Hue, saturation, and lightness are all exposed.
Each card is tagged with a GPU cost estimate. Animations are tuned to stay under 8ms per frame on a mid-range mobile device, and they automatically pause when their tab is hidden.
We would love that. Open a pull request on the gallery repo with a CodePen link, a thumbnail, and a short description. New submissions are reviewed weekly and credited to your handle.

Ready to set your UI on fire?

Open the Forge, roll the dice, ship something warm.