Live preview Navigation
#transform CSS effects
5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.
Live preview Navigation
Vertical Tab Left Arrow Pointer
Vertical tabs with a left-pointing arrow on the active item.
Live preview Navigation
Live preview Navigation
Vertical Tab Dot Indicator
Vertical tabs with a glowing dot indicator on the active item.
Live preview Navigation
Vertical Tab Fill Bg
Vertical tabs with a sliding colored fill background on hover.
Live preview Navigation
Vertical Tab Icon Trailing
Vertical tabs with trailing right-side icons that pop on active.
Live preview Navigation
Vertical Tab Pill Morph
Vertical tabs where the active pill morphs smoothly between items.
Live preview Navigation
Live preview Navigation
Vertical Tab Slide Content
Vertical tabs that slide horizontally revealing content offset.
Live preview Navigation
Vertical Tab Step Marker
Vertical tabs with numbered step markers like a wizard.
Live preview Navigation
Circle Mask Wipe Nav
Active indicator revealed by a circle that expands outward from the link.
Live preview Navigation
Wipe Right Reveal Nav
Active tab revealed by a rightward wipe sweeping across the nav bar.
Live preview Progress
Chalk Steps Progress
A four stage step tracker where completed marks carry a drawn tick and a green connector.
Live preview Progress
Circuit Manometer Progress
A round pressure dial with a tick ring, a red danger band and a needle that keeps quivering.
Live preview Progress
Ember Health Progress
A skewed game health bar whose colour is read off a fixed red to lime ramp and split by notches.
Live preview Progress
Opal Tide Progress
A round vessel filled to sixty two percent with a rotating blob that reads as a moving tide.
Live preview Progress
Valley Ticks Progress
Twelve rotated tick marks form a circular counter with eight of them lit around a centre count.
Live preview Sliders
Opal Bubble Slider
A pointed value bubble lifts above the rail whenever the control is touched.
Live preview Tabs
Amber Segment Control
An iOS style segmented control with a springy amber thumb and scaling panels.
Live preview Tabs
Arc Vapor Tabs
A vaporwave grid horizon where the underline swings along a shallow arc, not a line.
Live preview Tabs
Basalt Icon Tabs
Icon only tabs cut from dark basalt with an ember bar riding the top edge.
Live preview Tabs
Cascade Icon Swap Tabs
Each tab flips its hollow icon over to a solid one the moment it becomes active.
Live preview Tabs
Circuit View Switcher Tabs
Board style tabs that swap the panel between a list, a grid and a bar chart.
Live preview Tabs
Coil Carton Tabs
Corrugated cardboard tabs whose panel unrolls out of its own top left corner.
Live preview Tabs
Coral Icon Text Tabs
Icon and label together; the icon tilts and grows while an underline opens outward.
Live preview Tabs
Cove Peeking Carousel Tabs
Panels ride a horizontal track, the neighbours peeking dimmed at the edge of the frame.
Live preview Tabs
Delta Language Tabs
A language picker whose two letter code chip fills in as the greeting swaps below.
Live preview Tabs
Fjord Billing Period Tabs
A billing period switch with a sliding thumb, a saving badge and a swapping price.
Live preview Tabs
Flange Tier Tabs
Tier tabs where a bolted flange ring fills solid on the plan you open.
Live preview Tabs
Garnet Slide Tabs
Deep garnet chips select a panel that slides in from the right on every switch.
Live preview Tabs
Gasket Turning Panel Tabs
Panels seat themselves with a combined scale and rotation, like a gasket ring.
Live preview Tabs
Granite Gradient Tabs
The active tab fills with a granite gradient while the panel rail slides sideways.
Live preview Tabs
Lagoon Side Rail Tabs
A vertical rail on the left points a small arrow into the wide panel it opened.
Live preview Tabs
Lapis Scale Tabs
A small dot marks the active tab and the panel scales up out of a blur.
Live preview Tabs
Lever Tilt Tabs
The chosen tab tips over its pivot and the panel swings in from the same hinge.
Live preview Tabs
Meadow Thumbnail Tabs
Gallery thumbnails act as tabs and the full frame above cross fades with its caption.
Live preview Tabs
Opal Thick Underline
A thick underline drifts between tabs while its opal gradient keeps shifting.
Live preview Tabs
Piston Time Range Tabs
Time range tabs whose piston head plunges down into the selected window.
Live preview Tabs
Pulse Brutalist Tabs
Heavy unrounded blocks with a hard offset shadow that springs into place on click.
Live preview Tabs
Quartz Vertical Tabs
A vertical tab column with a violet rail that travels along the right edge.
Live preview Tabs
Ratchet Account Type Tabs
A pawl steps across a toothed rack to pick between two account types.
Live preview Tabs
Rivet Auth Form Tabs
Riveted plates switch between a sign in and a sign up form with real fields.
Live preview Tabs
Ruby Card Tabs
Three small cards act as tabs and the chosen one lifts with a ruby glow.
Live preview Tabs
Slate Boxed Tabs
Separate slate boxes lift on selection and the panel rises into place.
Live preview Tabs
Tether Divider Tabs
Hairline dividers split the tabs and a tether drops from the active one to the panel.
Live preview Tabs
Thicket Display Type Tabs
Oversized display words act as the tab bar, the active one growing while the rest recede.
Live preview Tabs
Valve Delivery Tabs
Delivery options whose valve handle turns a quarter and opens the green line.
Live preview Tabs
Vault Deco Tabs
Gilded art deco plates tilted back in perspective; the chosen one stands upright.
Live preview Tabs
Verge Page Turn Tabs
Cream book leaves bound at the spine; each panel turns over from the left edge.
Live preview Tables
Brass Row Lift
Hovering a row slides it sideways and drops a warm brass rail on its left edge.
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text