Most Popular CSS Effects (Page 19)

Live preview Toggles

Sync Spin

Two arrows form a sync circle that spins while syncing.

#animation #transform #shadow

Live preview Toggles

Tarnished Silver

Tarnished silver with dark oxidation patina around the edges.

#gradient #transform #shadow

Live preview Toggles

Tempo Slow / Fast

Knob spins slow when off and accelerates when toggled on.

#animation #gradient #transform

Live preview Toggles

Tether / Untether

Chain link breaks into scissors on the slate track.

#transform #shadow

Live preview Toggles

Thunder Storm

Lightning bolt crackles to life on a stormy track.

#animation #gradient #transform

Live preview Toggles

Titanium / Chrome

Dark titanium knob polishes to a mirror chrome finish.

#gradient #transform #shadow

Live preview Toggles

Titanium Forged

Forged titanium with hardened steel knob.

#gradient #transform #shadow

Live preview Toggles

Tom / Cymbal

Tom drum knob becomes a sparkling cymbal on the teal track.

#transform #shadow

Live preview Toggles

Topaz Sun

Golden topaz with sun-yellow glow.

#gradient #transform #shadow

Live preview Toggles

Tornado Spin

Tornado icon spins up when the storm toggle activates.

#animation #transform #shadow

Live preview Toggles

Traffic Light Toggle

A horizontal traffic light slider where the knob moves from red stop to green go.

#gradient #shadow #border

Live preview Toggles

Train / Bus

Rail train switches to a road bus route.

#transform #shadow

Live preview Toggles

Tree / Bare

Leafy tree sheds its canopy to a bare winter skeleton.

#gradient #transform #shadow

Live preview Toggles

Tremor / Calm

Tremoring knob calms down on the violet track.

#animation #transform #shadow

Live preview Toggles

Tube Amp

Vacuum tube glows warm orange when the amp powers up.

#gradient #transform #shadow

Live preview Toggles

Tune / Mute

Musical note knob becomes a mute speaker on the indigo track.

#transform #shadow

Live preview Toggles

Turbine Spin

Power turbine blades spin to generate energy.

#animation #gradient #transform

Live preview Toggles

Umbrella Open

Knob transforms into a canopy as rain appears on the track.

#gradient #transform

Live preview Toggles

Veil / Reveal

Translucent knob fades into full opacity as the foggy track clears.

#transform #shadow

Live preview Toggles

Velour Soft

Plush velour texture with deep pile soft surface.

#gradient #transform #shadow

Live preview Toggles

Velvet / Linen

Velvet knob transitions to a woven linen texture on toggle.

#gradient #transform #shadow

Live preview Toggles

Verse / Refrain

Book knob becomes a repeat sign on the amber track.

#transform #shadow

Live preview Toggles

Violet Storm

Dark violet storm clouds with electric purple knob.

#gradient #transform #shadow

Live preview Toggles

Visible / Hidden

Eye opens to reveal content or closes to hide it.

#transform #shadow

Live preview Toggles

VPN / LAN

Shield VPN knob becomes a house LAN on the green track.

#transform #shadow

Live preview Toggles

Wand / Staff

Magic wand knob becomes a powerful staff on the violet track.

#transform #shadow

Live preview Toggles

Watch / Interact

Passive eye becomes an active pointer hand.

#transform #shadow

Live preview Toggles

Wave / Tide

Wave knob swells into a high tide on the blue track.

#transform #shadow

Live preview Toggles

Win / Lose

Trophy gleams for a win, broken for a loss.

#gradient #transform #shadow

Live preview Toggles

Win / Lose RNG

Trophy knob becomes a loss X with a roll-the-dice feel.

#animation #transform #shadow

Live preview Toggles

Wrap / Unwrap

Gift box emoji unwraps into an empty box when toggled.

#transform #shadow

Live preview Toggles

X-Ray Vision

Skeleton pattern reveals through the track when x-rayed.

#animation #gradient #transform

Live preview Toggles

Zircon Spark

Zircon crystal with diamond-bright spark.

#animation #gradient #transform

Live preview Toggles

Zoom Lens

Camera lens zooms in with aperture ring adjusting.

#gradient #transform #shadow

Live preview Accordions

Amber Edge Accordion

A resin coloured rail down the left edge stretches to full height when open.

#checkbox #transform #max-height

Live preview Accordions

Anvil History Accordion

Activity is grouped by day and each group tightens its letter spacing as it lands.

#details #history #letter-spacing

Live preview Accordions

Arc Vapor Accordion

A sunset gradient with a receding neon grid running under the glowing rows.

#radio #vaporwave #gradient

Live preview Accordions

Aurora Stagger Accordion

Body lines lift into view one after another on a staggered delay ladder.

#details #stagger #animation

Live preview Accordions

Basalt Console Accordion

A terminal window where each command line folds its own output away.

#details #monospace #animation

Live preview Accordions

Bearing Help Accordion

A help centre where focusing the search box reveals a hint above the topic folds.

#details #focus-within #search

Live preview Accordions

Bloom Mono Accordion

Pure black and white rows invert completely the moment a section opens.

#checkbox #monochrome #contrast

Live preview Accordions

Brass Ledger Accordion

Numbered ledger rows where the brass index chip fills as the note unrolls.

#checkbox #max-height #transition

Live preview Accordions

Caliper Guide Accordion

Step numbers come from a CSS counter, so no digit is written into the markup.

#details #counter #steps

Live preview Accordions

Canyon Tree Accordion

A file tree feel where nested folders indent behind their own guide lines.

#details #nested #monospace

Live preview Accordions

Cascade Pill Accordion

Fully rounded pill rows relax into soft rectangles as their body appears.

#checkbox #border-radius #transition

Live preview Accordions

Chalk Dual Line Accordion

Two line headers pair a title with a quiet subtitle and a folding caret.

#checkbox #typography #transform

Live preview Accordions

Chassis Notify Accordion

Every channel folds out a segmented control that sets how often it may reach you.

#details #radio #segmented

Live preview Accordions

Circuit Toggles Accordion

A settings panel whose groups unfold into rows that each carry a working switch.

#checkbox #settings #grid

Live preview Accordions

Cobalt Fill Accordion

The open header floods with cobalt blue swept in from the left hand edge.

#radio #transform #gradient

Live preview Accordions

Coil Carton Accordion

Kraft cardboard panels with a fluted edge and a tape strip that stretches open.

#checkbox #cardboard #texture

Live preview Accordions

Conduit Privacy Accordion

Privacy rows pair an explanation fold with a switch, and the required one stays locked.

#checkbox #privacy #disabled

Live preview Accordions

Copper Rule Accordion

No shadows at all: a hairline rule draws itself in copper when a row opens.

#checkbox #minimal #transform

Live preview Accordions

Coral Wave Accordion

An open row keeps a slow coloured wave drifting along its underline strip.

#checkbox #animation #gradient

Live preview Accordions

Cove Swap Accordion

The trailing action word slides out and its opposite slides in on toggle.

#checkbox #label-swap #transform

Live preview Accordions

Cusp Zip Accordion

A zipper runs under the header and its pull travels across as the pocket opens.

#checkbox #zipper #transform

Live preview Accordions

Dash Sketch Accordion

Dashed pencil boxes sit slightly askew and wobble a little when opened.

#details #sketch #dashed

Live preview Accordions

Delta Split Accordion

Two independent columns of foldable rows sit side by side in one grid.

#details #grid #two-column

Live preview Accordions

Dune Right Accordion

Everything is anchored to the right edge and the marker turns from there.

#details #right-aligned #transform

Live preview Accordions

Dynamo Keys Accordion

Shortcut groups list their key caps while a small dynamo wheel keeps turning.

#checkbox #keyboard #conic-gradient

Live preview Accordions

Ember Stack Accordion

Cards overlap like a fanned deck until the chosen one steps out of the pile.

#checkbox #stack #transform

Live preview Accordions

Fjord Slide Accordion

Panels open sideways: the body widens from the left header out to the right.

#checkbox #horizontal #max-width

Live preview Accordions

Flange Glossary Accordion

Letter groups sweep a tinted wash across the header while the term list unrolls.

#checkbox #glossary #background-size

Live preview Accordions

Flint Triangle Accordion

A clipped triangle marker pivots downward when its section takes the focus.

#radio #clip-path #transform

Live preview Accordions

Forge Lessons Accordion

Course chapters list their lessons with a play wedge, runtime and a watched state.

#checkbox #lessons #clip-path

Live preview Accordions

Frost Panel Accordion

Frosted glass panels whose chevron flips and whose text thaws in from a blur.

#details #transform #filter

Live preview Accordions

Garnet Steps Accordion

Numbered steps joined by a connector line, with only one step expanded.

#radio #steps #border

Live preview Accordions

Gasket Errors Accordion

Error codes open into a cause and fix pair while the code chip picks up a ring.

#checkbox #errors #box-shadow

Live preview Accordions

Girder Team Accordion

Crew groups slide their members in from the left beside a drawn truss marker.

#checkbox #team #transform

Live preview Accordions

Glacier Icons Accordion

Opening a section uncovers a four cell grid of small geometric icon tiles.

#details #grid #clip-path

Live preview Accordions

Gleam Scroll Accordion

A parchment scroll unrolls from its rod and the writing drops into place.

#details #scroll #animation

Live preview Accordions

Glide Glass Accordion

Frosted glass panes float over a colour blur and the body glides down on open.

#details #glassmorphism #backdrop-filter

Live preview Accordions

Granite Counter Accordion

Every row carries a count badge and only one section stays open at a time.

#radio #badge #max-height

Live preview Accordions

Halo Curtain Accordion

Two velvet curtains part sideways to uncover the text behind each header.

#checkbox #curtain #transform

Live preview Accordions

Harbor Plans Accordion

Priced plan rows compare at a glance and unfold their feature list on pick.

#radio #pricing #max-height

Live preview Accordions

Hush Wave Accordion

A soft wave sweeps across the panel and the text arrives in its wake.

#checkbox #mask-image #wave

Live preview Accordions

Ivory Dot Accordion

A bare list where a small dot swells into an open ring beside the active row.

#checkbox #minimal #shadow

Live preview Accordions

Jade Nested Accordion

A group folds open to reveal smaller accordions nested one level deeper.

#details #nested #animation

Live preview Accordions

Kiln Assets Accordion

One batch opens at a time and each file draws a bar sized to how heavy it is.

#radio #files #transform

Live preview Accordions

Kindle Envelope Accordion

The flap lifts on its hinge and the letter slides up out of the envelope.

#checkbox #envelope #perspective

Live preview Accordions

Lagoon Alerts Accordion

A notification tray whose day groups fold away with their unread markers.

#details #notification #animation

Live preview Accordions

Lapis Drawer Accordion

Each row looks like a drawer with a grip handle and its contents slide out.

#details #animation #gradient

Live preview Accordions

Lattice Order Accordion

An order summary whose subtotal rows unroll with dotted leaders under a fixed total.

#checkbox #invoice #max-height

Live preview Accordions

Lever Commands Accordion

A command cheat sheet whose lever arm tilts over as the monospace rows appear.

#checkbox #monospace #transform

Live preview Accordions

Lull Map Accordion

A paper map spreads out of its creases and the fold shading fades as it opens.

#checkbox #map #transform

Live preview Accordions

Marble Card Accordion

Card shaped rows that lift on hover and let the description rise into place.

#details #hover #shadow

Live preview Accordions

Meadow Code Accordion

Each file row unrolls a numbered code block with tinted selectors and props.

#checkbox #code #monospace

Live preview Accordions

Mesa Contact Accordion

A short question list closed off by a footer that offers a contact link.

#details #faq #footer

Live preview Accordions

Mica Grid Accordion

Grid template rows grow from zero while a mica flake glints beside the label.

#checkbox #grid #clip-path

Live preview Accordions

Monsoon Inset Accordion

Depth comes only from inset hairlines, never from a drop shadow underneath.

#checkbox #inset #box-shadow

Live preview Accordions

Nickel Switch Accordion

Every header carries a small metal switch that slides over as the row opens.

#checkbox #toggle #transform

Live preview Accordions

Oasis Legend Accordion

Colour coded category groups where the open group borrows its own hue.

#checkbox #legend #max-height

Live preview Accordions

Obsidian Arrow Accordion

The arrow head slides forward and turns a quarter turn while the text swipes in.

#details #arrow #transform

Live preview Accordions

Onyx FAQ Accordion

A quiet FAQ list whose plus sign rotates into a minus as the answer drops.

#checkbox #faq #transform

Live preview Accordions

Opal Strip Accordion

A horizontal ribbon where the chosen column widens and its text fades in.

#radio #horizontal #flexbox

Live preview Accordions

Orbit Relief Accordion

Softly embossed panels sink into the surface the moment their section opens.

#checkbox #neumorphism #box-shadow

Live preview Accordions

Pearl Avatar Accordion

Each row opens with an initial badge that brightens as the message unfolds.

#checkbox #avatar #radial-gradient

Browse by category

Popular tags