Modern glassmorphism
backdrop-filter + oklch() frosted glass card.
CSS widgets
Live demos · copy CSS · copy LLM prompt · baseline badges. Filter by tag:
CSS-only toggle
Checkbox-driven switch — no JavaScript at all.
Scroll progress bar
animation-timeline: scroll() reading indicator.
Container query cards
Layout that responds to container width, not viewport.
:has() dropdown
Expand/collapse or highlight with the parent selector.
Fluid typography
clamp() for scalable headings — no breakpoints.
Aspect-ratio card
Media card with consistent ratio and object-fit.
CSS accordion
details / summary styled, no JS.
Anchor-positioned tooltip
Tooltip tethered via anchor-name / anchor().
Subgrid layout
Aligned grid children with subgrid.
Center with place-items
display: grid; place-items: center — the two-line centering trick.
Auto-responsive card grid
The RAM pattern: repeat(auto-fill, minmax()) — zero media queries.
Layered realistic shadow
Multi-layer box-shadow with oklch for natural depth.
light-dark() function
One function, two colors — auto dark mode switching.
Fade in entrance
@starting-style fade-up on page load — no JavaScript.
Animated underline link
Hover underline slides in via background-size transition.
Primary button
Every state: hover, focus-visible, active, disabled.
Card skeleton loading
Shimmer animation placeholder while content loads.
Top navigation bar
Sticky nav with logo, links, and backdrop blur.
focus-visible focus ring
Keyboard-only focus rings — hidden on mouse click.
Sticky footer
Footer always at the bottom — grid + min-height: 100dvh.
Gradient text
Gradient fill on text with background-clip: text.
Sidebar + content layout
Grid sidebar with fit-content() — responsive without queries.
Truncate text with ellipsis
Single-line and multi-line text truncation.
Scroll snap gallery
Horizontal scroll gallery with scroll-snap-type.
Glass card
Frosted glass card with backdrop-filter: blur().
Styled text input
Custom input with focus ring, placeholder, and transitions.
Breadcrumb navigation
Flex breadcrumb with ::before separators.
Tag cloud / chip group
Flex-wrap tag group with consistent spacing.
CSS loading spinner
Border-based spinner with prefers-reduced-motion respect.
Gradient border
Card with gradient border using background-clip.
Skip to content link
Hidden link that appears on keyboard focus for accessibility.
CSS tooltip
Pure CSS tooltip on hover/focus — no JavaScript.
Avatar stack
Overlapping circular avatars with negative margins.
Dark mode toggle
No-JS dark mode switch with :has() on :root.
Responsive table
Table that stacks to cards on small containers.
Pricing card
Three-tier pricing with highlighted popular option.
Progress bar
Styled <progress> element with gradient fill.
Holy grail layout
Header + sidebars + content + footer with grid-template-areas.
Media object
Image + text side-by-side — the classic layout pattern.