AIMRAN
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.

Markdown version with all the code, for AI assistants

More in Checkboxes

See all Checkboxes

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

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.