Plasma Ball

Pure CSS interactive plasma ball with electric rays and toggle switch

Plasma Ball

A pure CSS interactive plasma ball with a glass sphere, central electrode, electric rays, and a toggle switch. Click the switch button at the base to activate the plasma effect, then hover the glass ball to attract lightning. No images, no SVGs, no JavaScript — just CSS with input:checked selectors.

Basic Plasma Ball

The plasma ball has a complex HTML structure with a hidden checkbox for the toggle:

Interactive Plasma Ball

Sizes

Small Plasma Ball

ClassSize
.art-plasma-ball-sm200px
(default)350px
.art-plasma-ball-lg500px

CSS Custom Properties

PropertyDefaultDescription
--art-plasma-ball-size350pxOverall container size
--art-plasma-ball-base-color#222222Base/stand color

Interactivity

The plasma ball uses pure CSS interactivity:

  • Toggle switch: A hidden <input type="checkbox"> controls the on/off state via input:checked selectors
  • Hover effect: Hovering the glass ball attracts additional ray groups toward the cursor

HTML Structure

<div class="art-plasma-ball">
  <input class="switcher" type="checkbox" />
  <div class="glassball">
    <div class="electrode"></div>
    <!-- 6 ray groups, each with 3-5 rays -->
    <div class="rays">
      <div class="ray"><span></span><span></span><span></span></div>
      <div class="ray bigwave"><span></span><span></span></div>
      <!-- more rays... -->
    </div>
    <!-- more ray groups... -->
  </div>
  <div class="base"><div></div><div></div><span></span></div>
  <div class="switch"></div>
</div>

API Reference

ClassDescription
.art-plasma-ballBase plasma ball with interactive toggle
.art-plasma-ball-smSmall size (200px)
.art-plasma-ball-lgLarge size (500px)