---
name: plasma-glow
description: Use when you want "Sci-fi, intense, exotic" - Uses animated glowing color fields resembling plasma energy.
---

# Plasma Glow

> **Category:** Premium / Futuristic  -  **Personality:** Sci-fi, intense, exotic
>
> **Best use:** Gaming, AI, event pages
>
> **Ratings:** Professional 2/5 - Casual 3/5 - Exotic 5/5 - Visual impact 5/5 - Difficulty 4/5 - Performance cost 4/5

## What it is

Plasma Glow fills the backdrop of a hero with slow-flowing masses of electric colour that read like contained plasma or a reactor's energy field. It is built from a handful of big, heavily-blurred radial-gradient "orbs" that drift on their own timers; where they overlap, `mix-blend-mode: screen` adds their light together so the seams brighten to white-hot cores, exactly like real plasma. A continuous `hue-rotate` drift on the whole field keeps the colour shifting through the spectrum so it never looks static. Reach for it on gaming, AI, crypto, or launch-event pages that want to feel intense and otherworldly — keep the foreground copy on a dark scrim so it stays readable.

## Dependencies / CDN

**None - pure CSS** for the effect (radial gradients + blend modes + keyframes). The optional pointer parallax is a few lines of vanilla JS. The demo loads two display/UI fonts:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tektur:wght@500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
```

## HTML

The plasma is a stack of empty `<span>`s behind the content. Keep the field as a sibling of the content, not a wrapper.

```html
<div class="stage">
  <div class="plasma" aria-hidden="true">
    <div class="field">
      <span class="orb o1"></span><span class="orb o2"></span><span class="orb o3"></span>
      <span class="orb o4"></span><span class="orb o5"></span><span class="orb o6"></span>
      <span class="swirl"></span>
    </div>
    <div class="vignette"></div>   <!-- darkens the edges -->
    <div class="scrim"></div>      <!-- darkens behind the copy for legibility -->
  </div>

  <div class="content">
    <h2 class="h">Compute that runs <em>white-hot</em></h2>
    <p>Hyperion fuses real-time ray tracing and generative AI…</p>
    <button class="primary">Request access</button>
  </div>
</div>
```

## CSS

```css
/* 1) STAGE — near-black so screen-blended light reads as glow. isolate so blends don't leak out. */
.stage{position:relative; overflow:hidden; border-radius:26px; min-height:640px; isolation:isolate;
  display:flex; align-items:center; justify-content:center; padding:54px 34px;
  background:radial-gradient(135% 125% at 50% 6%,#0a0c1c,#05060f 55%,#030309);}

/* 2) THE FIELD — one wrapper carries the slow hue drift over everything inside it */
.plasma{position:absolute; inset:0; z-index:0; overflow:hidden}
.field{position:absolute; inset:-18%; animation:hue 34s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

/* 3) THE ORBS — big, blurred, SCREEN-blended so overlaps go white-hot */
.orb{position:absolute; border-radius:50%; filter:blur(72px); mix-blend-mode:screen; opacity:.92}
.o1{width:62%;height:78%;left:-14%;top:-16%;background:radial-gradient(circle,#00e6ff,transparent 66%);animation:d1 17s ease-in-out infinite}
.o2{width:64%;height:82%;right:-16%;bottom:-22%;background:radial-gradient(circle,#ff1f8f,transparent 66%);animation:d2 21s ease-in-out infinite}
.o3{width:54%;height:64%;left:24%;top:16%;background:radial-gradient(circle,#8a2bff,transparent 64%);animation:d3 19s ease-in-out infinite}
.o4{width:46%;height:54%;left:30%;bottom:-14%;background:radial-gradient(circle,#ff7a00,transparent 62%);animation:d4 25s ease-in-out infinite}
.o5{width:50%;height:58%;right:4%;top:-12%;background:radial-gradient(circle,#2d6bff,transparent 66%);animation:d5 23s ease-in-out infinite}
/* the white-hot heart: plus-lighter is even brighter than screen */
.o6{width:30%;height:34%;left:42%;top:38%;mix-blend-mode:plus-lighter;background:radial-gradient(circle,#ffe0f1,transparent 60%);animation:d6 9s ease-in-out infinite}

/* 4) Each orb drifts + breathes on its own timer (vary durations so it never loops visibly) */
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(8%,6%)   scale(1.14)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7%,-8%) scale(.92)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(-9%,7%)  scale(1.12)}}
@keyframes d4{0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(7%,-9%)  scale(1.18)}}
@keyframes d5{0%,100%{transform:translate(0,0) scale(1.03)}50%{transform:translate(-6%,9%)  scale(.9)}}
@keyframes d6{0%,100%{transform:scale(.85);opacity:.5}     50%{transform:scale(1.3) translate(6%,-10%);opacity:.95}}

/* 5) Optional: a slow rotating conic sweep adds an "electric arc" feel */
.swirl{position:absolute;left:50%;top:46%;width:122%;height:122%;transform:translate(-50%,-50%);
  border-radius:50%;mix-blend-mode:screen;filter:blur(46px);opacity:.55;
  background:conic-gradient(from 0deg,transparent,rgba(0,230,255,.5) 50deg,transparent 120deg,
    rgba(255,31,143,.5) 200deg,transparent 270deg,rgba(138,43,255,.45) 320deg,transparent);
  animation:spin 38s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* 6) LEGIBILITY — frame the edges and darken behind the copy so text survives the glow */
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 120% at 50% 32%,transparent 34%,rgba(3,4,12,.5) 78%,rgba(3,4,12,.92))}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 130% at 26% 46%,rgba(3,4,12,.74),rgba(3,4,12,.22) 56%,transparent 76%)}

.content{position:relative;z-index:1;color:#eaf0ff}            /* must sit ABOVE the plasma */
.h em{background:linear-gradient(100deg,#00e6ff,#ff1f8f 48%,#ff7a00);
  -webkit-background-clip:text;background-clip:text;color:transparent}   /* plasma-coloured accent word */

/* 7) Reduced motion → a still plasma frame (no drift, no hue cycle) */
@media (prefers-reduced-motion:reduce){
  .field,.orb,.swirl{animation:none}
}
```

## JavaScript

Not required — the plasma is pure CSS. Optional flourish: nudge the field toward the pointer (and the foreground the other way) for parallax depth. Always gate it behind `prefers-reduced-motion`.

```js
(function(){
  var stage = document.querySelector('.stage');
  if(!stage || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  var field = stage.querySelector('.field'), content = stage.querySelector('.content');
  var tx=0, ty=0, raf=null;
  function apply(){
    raf=null;
    field.style.transform   = 'translate3d('+(tx*26)+'px,'+(ty*26)+'px,0)';
    if(content) content.style.transform = 'translate3d('+(tx*-8)+'px,'+(ty*-8)+'px,0)';
  }
  stage.addEventListener('pointermove', function(e){
    var r=stage.getBoundingClientRect();
    tx=(e.clientX-r.left)/r.width-.5; ty=(e.clientY-r.top)/r.height-.5;
    if(!raf) raf=requestAnimationFrame(apply);   // throttle to one paint per frame
  });
  stage.addEventListener('pointerleave', function(){ tx=ty=0; if(!raf) raf=requestAnimationFrame(apply); });
})();
```

> Add `transition:transform .4s ease-out` to `.field` so it eases back when the pointer leaves. (The demo also parallaxes a HUD panel; same idea — translate it on the opposite axis.)

## How it works

- **Light, not paint.** On a near-black stage, `mix-blend-mode: screen` makes each orb *add* its colour to whatever's behind it. Two cyan + magenta orbs overlapping screen toward white, which is what sells the "energy" — the bright cores are emergent, not drawn. `plus-lighter` on one small orb pushes a single spot to true white-hot.
- **Heavy blur = no edges.** `filter: blur(72px)` dissolves each gradient into a soft mass; without it you'd see six circles, not a field.
- **Independent timers = organic flow.** Every orb runs a different-length `translate + scale` keyframe (9s–25s), so the composite never visibly repeats.
- **One hue cycle for the whole field.** Animating `filter: hue-rotate()` on the *wrapper* drifts every colour together through the spectrum — far cheaper and more cohesive than animating each gradient's colour stops.
- **`isolation: isolate`** on the stage keeps the blend modes contained so the plasma can't tint the rest of the page.

## Customization

- **Palette / intensity:** swap the six orb colours. Cooler set (blues/violets) = calmer; add a hot `#ff7a00` or `#ff1f8f` orb for an aggressive reactor look. More overlap = more white-hot area.
- **Calm vs frantic:** lengthen all the `d*` durations (e.g. ×1.5) for a slow lava-lamp; shorten the hue cycle for faster colour churn.
- **Softness:** raise `blur()` (90px+) for a dreamy nebula, lower it (~40px) for tighter, more defined energy blobs.
- **Drop the swirl** for a purely organic field, or add a second rotating conic layer for more electric structure.
- **Foreground theming:** the gradient-clipped accent word and a glowing HUD panel (`backdrop-filter` over the plasma) reinforce the sci-fi tone.

## Accessibility & performance

- **Blur is the cost.** Several large `blur()` + `mix-blend` layers are GPU-heavy. Keep the orb count low (5–7), animate only `transform`/`opacity` (never the `blur` radius), and the field stays smooth. Animating `hue-rotate` on one wrapper is acceptable; per-orb colour animation is not.
- **Legibility first.** The plasma is bright and moving — never put body text directly on it. Use the `vignette` + `scrim` layers, keep copy on the darker side, and add `text-shadow` to headings. Verify contrast against the *brightest* frame, not the average.
- **Reduced motion:** the `@media (prefers-reduced-motion: reduce)` block freezes the field to a still plasma frame, and the JS bails before adding any listeners.
- `aria-hidden="true"` on the plasma container keeps it out of the accessibility tree — it's pure decoration.

## Gotchas

- **Needs a dark backdrop.** `screen` blending over a light stage washes out to near-nothing. The near-black stage is load-bearing, not decoration.
- **Content must be a sibling above the field**, with `position:relative; z-index:1`. If you nest the copy *inside* a blended/blurred layer it inherits the blur and becomes unreadable.
- **`isolation:isolate` (or any stacking context) on the stage** is required, or the `screen`/`plus-lighter` blends sample — and tint — whatever is painted behind the stage on the page.
- **Don't animate `filter: blur()`** (or the gradient stops) per frame — it forces re-rasterisation and stutters. Move/scale the pre-blurred orbs instead.
- **`plus-lighter`** clips to white fast; use it on one small orb only, or the centre blows out into a flat white disc.
- An ancestor `filter`/`backdrop-filter`/`transform` creates a containing block that can clip or de-isolate the blends — keep the plasma and its stage as direct siblings.