HTML + CSSToggles

Neon glow toggle

A dim outlined switch that lights up with a colored glow around the track and the knob when turned on.

Settings

16px
1x

Code

<label class="uv-tn"><input type="checkbox" checked><span></span></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 Toggles

Where to use it

This neon toggle switch looks like a light being turned on, which makes it a natural fit for a smart home dashboard (“Living room lights”), the RGB settings of a gaming keyboard app or the “Night mode” of a music player. Off, it is a quiet grey outline. On, both the track and the knob glow in your colors.

The difference between off and on is very clear, so nobody misreads the state. It really needs a dark background to shine; on white the glow looks washed out. Use the second color for the halo around the knob.