Live preview Accordions
Shaft Params Accordion
Endpoint rows unpack a parameter grid whose gaps grow open from nothing.
#grid CSS effects
33 free, pure-CSS effects match the "grid" tag. Each is copy-ready and needs no library or build step.
Live preview Avatars
Vault Selectable Avatar Grid
A radio group where the chosen avatar lifts out of the row and takes a warm ring.
Live preview Timelines
Reef Habit Week
A week of habit dots per row, with today's column ringed and pulsing.
Live preview Toggles
Has-Selector Settings Toggle
Switching on expands an extra options panel below it, using :has() and grid rows.
Live preview Accordions
Circuit Toggles Accordion
A settings panel whose groups unfold into rows that each carry a working switch.
Live preview Accordions
Delta Split Accordion
Two independent columns of foldable rows sit side by side in one grid.
Live preview Accordions
Glacier Icons Accordion
Opening a section uncovers a four cell grid of small geometric icon tiles.
Live preview Accordions
Mica Grid Accordion
Grid template rows grow from zero while a mica flake glints beside the label.
Live preview Accordions
Pulse Brutal Accordion
Heavy black outlines over a hard offset block that snaps open in two steps.
Live preview Accordions
Slate Stack Accordion
A radio group keeps one slab open and the body grows with grid template rows.
Live preview Accordions
Spindle Specs Accordion
Exclusive rows open a two column specification sheet that grows from zero height.
Live preview Accordions
Wander Bauhaus Accordion
Primary colour circle, square and triangle mark rows that grow from zero.
Live preview Avatars
Coral Team Quad Avatar
Four member tiles packed into one circular group avatar for shared spaces.
Live preview Avatars
Delta Presence State Grid
Six avatars in a grid, each labelled with a different presence state colour.
Live preview Avatars
Gasket Member Mosaic Wall
A twelve tile member wall dims as a whole so the hovered tile lifts out of the grid.
Live preview Modals
Arc Reward Modal
A points reward panel swings up along a wide arc over a scrolling vaporwave horizon grid.
Live preview Modals
Caliper Currency Modal
A currency selector shears in from the left and straightens its skew as it lands.
Live preview Modals
Harbor Emoji Picker
An emoji picker grows out of its lower left corner above a category strip and preview line.
Live preview Modals
Hush Archive Modal
A blueprint archive confirmation fades in quietly while its measure lines extend outward from the centre.
Live preview Modals
Ridge Date Picker Modal
A calendar sheet unrolls downward from its top edge and the chosen day pops into place.
Live preview Marquees
Willow Grid Floor
The caption rides over a fine engineering grid that pans slowly the other way.
Live preview Progress
Mica Grid Progress
Progress drawn as a grid of small mica tiles where fifteen of twenty four blocks are filled.
Live preview Progress
Rivet Defrag Progress
A dense disk map of sixty blocks in three states with a scanning beam crossing the grid.
Live preview Sliders
Lagoon Paired Sliders
Two colour coded controls sit shoulder to shoulder in one card, split by a thin divider.
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 Tables
Onyx Grid Frame
A fully ruled grid where the hovered cell brightens its own square only.
Live preview Tables
Quiver Spec Duel
Two cars share one lane per spec and their bars grow outward from a centre line in opposite ways.
Live preview Timelines
Bloom Seasons Timeline
A conic wheel splits the year into four seasons while a slow hand sweeps around it.
Live preview Timelines
Cove Ledger Timeline
Money in and out over three dates, each row flagged by a small direction arrow.
Live preview Timelines
Garnet Split Timeline
Dates sit left of the garnet rail and the matching notes line up on the right.
Live preview Timelines
Ridge Day Agenda
An hour column runs down the left while the current slot keeps breathing.
Live preview Timelines
Thicket Two Column Timeline
Two crews report on either side of a shared rail with the day marked in between.
Live preview Timelines
Valley Service Log
A maintenance ledger with banded rows, odometer readings and one job still due.