#focus CSS effects

10 free, pure-CSS effects match the "focus" tag. Each is copy-ready and needs no library or build step.

Focusing the field animates a registered angle so the gradient ring circles it once.

The placeholder lifts into a small label above the field once anything is typed.

The wrapper turns red only after a value is entered and fails, thanks to :has().

Six single-character cells that light up and lift as each digit is entered.

A slider with a gradient track and a thumb that grows a soft halo on focus.

A circular icon that stretches into a full search field when it gains focus.

A native select stripped of its default arrow, with a chevron that flips on focus.

A resizable textarea whose frame and counter recolour together while focused.

A minimal field where only the baseline exists, and it fills in from the centre.

Items start out of focus and sharpen one at a time as the blurred rail travels on.

Popular tags