HTML + CSSCheckboxes

Neon checkbox

An outlined box that lights up with a neon glow and a shining tick when switched on.

Settings

16px
1x

Code

<label class="uv-ck2n"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Turbo mode</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Checkboxes

Where to use it

Neon belongs on dark interfaces with a bit of attitude: the graphics options of a game launcher, a “Turbo mode” switch in a crypto dashboard or the filters of a music festival site. The glow makes the active options visible from across the room. A neon checkbox in CSS that uses your accent colour for the light.

On a white background the glow almost disappears, so save it for dark themes. Bright, saturated colours such as cyan, magenta or lime give the most convincing neon; pastel shades look washed out.