Expanding Search

A translucent search pill that widens under the cursor and again on focus.

About this tool

A CSS-only search field whose entire behaviour is three widths: 200px at rest, 240px under the pointer, 280px once focused, eased over half a second. The fill is a two-stop translucent gradient, so the pill picks up whatever page it is dropped onto instead of carrying a background around, and the two stops are HorizonX neutrals to begin with. HorizonX adds what the original leaves out: a focus ring that pairs a white outline with a tinted halo, so focus stays visible on a dark surface and a light one alike, and a screen-reader label, because a placeholder disappears the moment anyone types. The box model is pinned rather than inherited, so the pill keeps its height under a global border-box reset. Edit the three widths, the gradient, the copy and the cadence, then export one self-contained HTML file.

In collections: Form Controls: Switches, Inputs & Selectors CSS Hover Effects & Animations

Guide: Text on Hover: Readable Tooltips and Hover Text Effects

UI/UX · HTML / CSS All tools

Copy

Placeholder

Screen-reader label

Text size px

Text align

center left

Field

Rest width px

Hover width px

Focus width px

Palette

Fill start

Fill end

Text

Focus ring

Motion

Transition ms

Preview

State

auto idle hover focus

Stage

Stage colour

#ffffff