HTML + CSSFilters

Tabs with a glowing indicator

A short bar of light sits under the selected tab and glides over, halo included, when you switch.

Settings

16px
1x

Code

<div class="uv-ftg"><button>Home</button><button class="on">Explore</button><button>Saved</button><button>Profile</button><span class="g"></span></div>

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 Filters

Where to use it

Made for dark interfaces. The top navigation of a music streaming app, with Home, Explore, Saved and Profile, or the menu of a gaming community. The glow gives the active tab a neon feel, as if it were lit from below. If you were after glowing tabs or a neon navigation bar in CSS, start here.

On a white background the halo washes out, so keep it for dark themes. One bright accent colour is enough; cyan, lime or hot pink all work. Leave some space under the tabs so the light has room to spread.