Prism Checkbox

A checkbox on the HorizonX palette: a spinning prism ring, an ambient bloom and a six-point particle burst.

About this tool

A CSS-only checkbox built in layers. Unchecked it reads as a glass hairline over a faint dot grid; checked, the box fills with ink, a conic-gradient ring spins behind it, an ambient bloom rises, the checkmark draws itself on by dash-offset and six particles burst outward on staggered delays. The geometry and motion the source published are intact (a 34px box, a 3s ring and a 620ms burst), while the palette is HorizonX's: one Ink control and one Check mark, on the design system's 12px radius and 250ms base timing, plus a transparent host, a native keyboard-accessible input, a visible focus ring and reduced-motion support. Every alpha is derived from those two colours, so one drag re-tints the whole component instead of leaving stale accents behind. One Size control replaces the small and large variants and lands on both. Edit the palette, geometry, texture, bloom and timing, then export one self-contained HTML file.

In collections: CSS Glow Effects & Neon Glow Components Custom CSS Checkboxes & Radio Buttons

UI/UX · HTML / CSS All tools

Copy

Show text

Label

Description

Checkbox

Checked

Size px

Corner radius px

Effects

Grid texture %

Ambient bloom %

Particle burst

Burst spread px

Palette

Ink

Check mark

Motion

State transition ms

Ring spin ms

Burst duration ms

Stage

Stage colour

#ffffff