Beacon Tabs

Numbered tabs where the selected tile drops its own fill in from above and lights a beacon underneath.

About this tool

A row of rounded numbered tiles that carries its entire selection in two pseudo-elements: a tile-sized fill that drops in from half a tile above and settles behind the number, and a beacon dot that rises underneath one beat later, both on the source cubic-bezier(0.23, 1, 0.32, 1) over 480ms. The selected tile drops its outline, flips to the inverse label colour and scales to 1.1. It is a real radio group — the inputs stay in the accessibility tree, so Tab and arrow keys work and focus is visible — and it renders with no JavaScript at all. Tab count, per-tile labels, tile geometry, typography, accent, shadow depth, transition and beacon delay are all editable.

In collections: Custom CSS Checkboxes & Radio Buttons Navigation Components: Tabs, Steppers & Menus

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough?

UI/UX · HTML / CSS All tools

Tabs

Label 1

Label 2

Label 3

Label 4

Label 5

Label 6

Shape

Tile size px

Corner radius px

Tile gap px

Outline width px

Outline colour

#ffffff

Selection

Accent

#ffffff

Selected scale

Beacon size px

Beacon drop px

Shadow depth

Type

Label size px

Label weight

Letter spacing px

Label colour

Selected label

Motion

Transition ms

Beacon delay ms

Stage

Stage colour

#ffffff