# transform CSS effects

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

Live preview Navigation

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

Live preview Navigation

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

Live preview Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

Live preview Navigation

Square Step Indicator

Step indicator with square markers.

Live preview Navigation

Sticky Note Curl Nav

Nav items styled as sticky notes with curling corners on hover.

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

Live preview Navigation

Neon Active Tabs

Neon glowing active tab indicator.

Live preview Navigation

Pill Bounce Tabs

Pill tabs that bounce into place on active.

Live preview Navigation

Taffy Pull Navbar

Links stretch like taffy when hovered, with a sticky transition.

Live preview Navigation

Uppercase Grow Navbar

Hovered link transforms to uppercase with smooth spacing growth.

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

Live preview Navigation

Chevron Collapsible Treeview

Tree menu where chevrons rotate as the group expands on hover.

Live preview Navigation

Connector Line Treeview

Tree menu with L-shaped connector lines linking parents to children.

Live preview Navigation

Vertical Tab Right Arrow Pointer

Vertical tabs with a right-pointing arrow on the active item.

Live preview Navigation

Vertical Tab Circle Bg Active

Vertical tabs with a circular active background indicator.

Live preview Navigation

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

Live preview Navigation

Vertical Tab Icon Leading

Vertical tabs with leading icons that scale on active.

#hover #animation #transform

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

Live preview Navigation

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

Live preview Navigation

Vertical Tab Underline Slide

Vertical tab nav where the active underline slides between items.

Live preview Navigation

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

Live preview Navigation

Wipe Left Reveal Nav

Active tab revealed by a leftward wipe that sweeps across the nav.

#hover #animation #transform

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

Live preview Progress

Amber Sheen Progress

A polished amber fill with a light sheen that sweeps across it on a loop.

#animation #transform #gradient

Live preview Progress

Anvil Stroke Progress

A piston head runs the bore back and forth while the charge ahead of it is compressed.

#piston #animation #transform

Live preview Progress

Valley Ticks Progress

Twelve rotated tick marks form a circular counter with eight of them lit around a centre count.

#transform #rotate #counter

Live preview Sliders

Chassis Steering Feel

A CSS steering wheel turns as the pointer arrives while the rail sets lock-to-lock travel.

#slider #steering #hover

Live preview Sliders

Copper Diamond Slider

A tilted copper lozenge glides on a thin wire and opens up when hovered.

#slider #diamond #transform

#navigation #icon #transform

Aurora Bottom Dock Tabs

A mobile bottom navigation dock where the chosen icon lifts and glows aurora green.

#transform #gradient #transition

Brass Pill Tabs

A polished brass pill slides behind the labels while the panels cross fade.

#transform #border #monospace

Caliper Region Tabs

A pair of caliper jaws slides along the bar and grips the active region.

#border #gradient #transform

Flange Tier Tabs

Tier tabs where a bolted flange ring fills solid on the plan you open.

#transform #gradient #layout

Flint Sideline Tabs

A left hand rail marks the active row and the whole label steps inward.

#transform #gradient #shadow

Frost Underline Tabs

A frosted tab bar where a glowing underline glides beneath the active label.

#transform #gradient #typography

Lattice Unit Tabs

A unit switcher on a lattice grid where the reading flips over on each change.

#typography #transform #shadow

Mica Hairline Tabs

Uppercase spaced labels over a single hairline that glides between them.

#animation #transform #badge

Pylon Filter Tabs

A pylon mast rises over the active filter and the chip list underneath swaps.

#form #transform #gradient

Ridge Step Form Tabs

A three step wizard where diamond nodes light up and a dotted ridge links them.

#layout #transform #shadow

Shaft Bottom Bar Tabs

The tab strip sits under the panel and a shaft pin rises into whichever is open.

#pattern #transform #gradient

Spiral Halftone Tabs

A printed dot screen where the panel turns into place as the halftone rotates behind it.

#hover #underline #transform

Willow Hover Preview Tabs

Hovering grows a faint half underline first, so the click only completes the line.

Ballet Grace

Graceful ballet pink on text.

3D Bounce

Text bouncing with a 3D perspective tilt.

Bounce Rhythm

Text bouncing up and down in a steady rhythm.

Boxing Glove

Boxing glove punching on text.

Cadenza Solo

Virtuosic solo cadenza on text.

Cards Shuffle

Shuffling playing cards on text.

Chess Bishop

Chess bishop on diagonal on text.

Circus Tent

Circus striped tent on text.

Cloud Puff Drift

Puffy clouds drifting slowly across text.

#animation #transform #filter

Color Shift Cycle

Animated color hue shift cycle.

#animation #transform #filter

Color Wheel Spin

Color wheel spinning hue rotation.

Compass Needle

Compass needle pointing direction on text.

Cranberry Tart

Tart red cranberry on text.

Cymbal Crash

Loud cymbal crash burst on text.

Daffodil Trumpet

Yellow daffodil trumpet cup on text.

Decrescendo Fade

Fading decrescendo volume on text.

Dew Drop

Glistening dewdrop sliding down text.

Drift Sideways

Text drifting gently sideways like a leaf.

Event Horizon

Dark ring of no return surrounding text.

#animation #transform #3d

3D Flip Card

Text flipping in 3D space like a card.

Ivy Climb

Climbing ivy vines on text.

Jitter Shake

Text jittering with a chaotic shake pattern.

Lotus Tranquil

Tranquil pink lotus on water text.

Mist Haze

Soft misty haze over distant text.

Peony Lush

Lush full pink peony on text.

#animation #transform #wave

Rainbow Wave Bounce

Each letter cycles through rainbow hues while bouncing in a sine wave.

Red Giant Star

Swollen red giant star slowly expanding.

Rhythm Pulse

Steady rhythm pulse on text.

#animation #transform #3d

3D Y Rotation

Text rotating around the Y axis in 3D.

Rotate Spin

Text rotating 360 degrees continuously.

Rotate Y Yaw

Y-axis yaw rotation animation.

Shadow Perspective Floor

Floor perspective reflection shadow.

#transform #shadow

#animation #transform #rotate

Violent Shake

Text shakes violently for a brief moment then pauses, on a loop.

Shake Vertical Rattle

Vertical rattle shake motion.

#animation #transform #clip-path

Slice Reveal

A colored copy of the text splits into top and bottom halves sliding apart.

Stamp Rubber Faded

Faded rubber stamp imprint.

#transform #filter

Strawberry Red

Sweet red strawberry on text.

Treble Clef

Curving treble clef over text.

Treble Tinkle

High treble tinkle on text.

Tremor Hard Seismic

Hard seismic tremor motion.

Tulip Cup

Cup-shaped tulip gradient on text.

Vibrate Fast Buzz

Fast buzzing vibration motion.

Vibrate Slow Hum

Slow humming vibration motion.

Water Ripple

Text with a watery ripple distortion effect.

#animation #transform #wave

Wave Bounce Letters

Letters rise and fall in a smooth traveling wave.

Willow Weep

Weeping willow branches on text.

Zoom In

Text zooming in from far distance.

Live preview Tooltips

Dashed Arrow Left

Tooltip to the left of the trigger with a dashed connector.

Live preview Tooltips

Diamond Arrow Left

Tooltip with a diamond-shaped pointer on the left side.

Live preview Tooltips

Double Arrow Left

Tooltip with stacked double-chevron arrow pointing right.

Live preview Tooltips

Double Arrow Right

Tooltip with stacked double-chevron arrow pointing left.