// 37 examples

CSS Layout Examples

Layout is the largest group here because it covers both where things sit and how they behave as the page scrolls or the window changes size. Grid and flexbox do the arranging, aspect-ratio holds proportions steady, position: sticky pins an element while its container scrolls past, and scroll-driven animation ties motion to scroll position with no script involved.

The range runs from small self-contained pieces, such as aspect-ratio boxes and split panels, up to whole-page behavior like parallax scenes, reveal-on-scroll sections, and carousels that snap. Scroll-driven animation is the newest technique in this group, so those pages carry browser support notes worth reading before shipping.

Hidden content revealed!
Layout Beginner
Show / Hide Content
Toggle visibility of content using a checkbox and the ~ combinator.
What is Pure CSS?
Techniques that work without any JavaScript.
Does it work everywhere?
Modern browsers support all examples here.
Layout Beginner
Accordion / FAQ
Expandable content panels using the <details> and <summary> elements.
The secret is revealed!
Layout Beginner
Click-to-Reveal
Content that reveals on click using a checkbox as state.
Hover me
Back side!
Layout Intermediate
3D Card Flip
A card that flips on hover using CSS 3D transforms and perspective.
Hover to zoom
Layout Beginner
Image Zoom on Hover
Smooth image zoom on hover using CSS transform and overflow:hidden.
Pure CSS
Layout Beginner
Gradient Text
Text filled with a gradient using background-clip:text.
Open Modal
Layout Intermediate
Modal Dialog
A modal using :target to show/hide without JavaScript.
Slide 1 of 5
Slide 2 of 5
Slide 3 of 5
Slide 4 of 5
Slide 5 of 5

← scroll or swipe →

Layout Beginner
Scroll Snap Carousel
A horizontal carousel using scroll-snap-type and scroll-snap-align.
16:9
1:1
4:3
Layout Beginner
Aspect Ratio Box
Maintain a fixed aspect ratio on any element using the aspect-ratio property.
Glitch
Glitch
Layout Intermediate
Glitch Effect
An animated glitch effect using CSS clip-path, pseudo-elements, and keyframes, with no JavaScript.
Name Role Status
Alice Chen Designer Active
Bob Torres Engineer Pending
Carol Kim Manager Active
David Park Analyst Inactive
Layout Beginner
Sticky Table Header
A table header that stays fixed while scrolling using position: sticky on <thead>.
Layout Intermediate
CSS Lightbox
Full-size image overlay using the :target pseudo-class, with no JavaScript.
Design
CSS
Anim
Layout
Layout Beginner
Scroll Shelf
A horizontally scrollable content shelf with scroll-snap for clean stopping points.

PURE CSS

NEON GLOW

Layout Beginner
Neon Text Effect
Glowing neon text using layered text-shadow values and a flicker CSS animation.

Hello, World! 👋

Pure CSS only

Layout Intermediate
Typewriter Effect
Text typed letter by letter using a @keyframes width animation with steps() timing.

🎉 Congrats!

Layout Advanced
Confetti Burst
CSS confetti animation using transform, @keyframes, and nth-child for staggered timing.
Scroll to explore
Layers move at different speeds
Layout Advanced
Parallax Scrolling
Background and foreground layers move at different speeds using scroll-driven animations.
CSS
Layout Intermediate
Morphing Blob
An organic shape that continuously morphs using animated border-radius keyframes.
Layout Advanced
Particle Float
Floating particles using multiple elements with staggered CSS animation-delay values.
☔ CSS Rain
Layout Intermediate
CSS Rain Effect
Animated rain streaks using absolutely-positioned elements and staggered @keyframes.
Elastic
Spring
Linear
Layout Intermediate
Elastic Bounce
A ball that bounces with a spring-like overshoot using a custom cubic-bezier easing.
Border drawn
Drawing...
Layout Intermediate
Border Draw Button
A button whose border traces itself on hover using SVG stroke-dashoffset animation.
Layout Intermediate
Magnetic Button
A button with a dramatic lift and shadow on hover using CSS transitions and @starting-style.
Filled →
Sweeping
Layout Beginner
Ghost Button Fill Sweep
An outlined button that fills with color from left to right on hover using a pseudo-element.
A35%
B25%
C20%
D20%
Layout Intermediate
CSS Pie Chart
A pie chart drawn with conic-gradient(), with no SVG and no JavaScript.
M
T
W
T
F
S
S
Layout Intermediate
CSS Bar Chart
Animated bar chart using CSS custom properties for heights and @keyframes grow animation.
75%
60%
88%
Layout Advanced
Animated Donut Chart
SVG donut chart animated with stroke-dashoffset, with no JavaScript required.
What is CSS nesting? +
CSS nesting lets you write rules inside other rules, natively in the browser.
How does grid-template-rows work? +
Layout Intermediate
Expandable Card
A card that expands to reveal more content on click, with no JavaScript and no max-height hack.
CSS is
powerful. modern. expressive. fast. powerful.
Layout Intermediate
Text Ticker
Words rotate vertically in a loop using CSS @keyframes and overflow: hidden, with no JavaScript.
Project Nightfall is our codename for the acquisition of Meridian Labs. The deal closes on March 14th for $240M.
// hover to reveal
Layout Beginner
Redacted Text
Sensitive text blurred by default and revealed on hover using CSS filter: blur(), with no JavaScript.
Pure CSS Zero JS Modern CSS Pure CSS Zero JS Modern CSS
CSS Nesting Container Q Scroll-Driven CSS Nesting Container Q Scroll-Driven
Layout Beginner
Marquee Text
Infinite scrolling text using CSS translateX and @keyframes, the modern replacement for the obsolete <marquee> tag.
Design
Typography first.
Great design starts with type. CSS gives you full control.
Layout Advanced
Scroll Reveal
Text sweeps in from the left as it enters the viewport using a scroll-driven clip-path animation, with zero JavaScript.
May 2026
‹ ›
Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Layout Intermediate
CSS Calendar
A monthly calendar built with CSS Grid: seven equal columns, hover states, today highlighted, no JavaScript.
purecss.com
Layout Advanced
CSS QR Code
A decorative QR-like pattern drawn with CSS box-shadow on a single element, with no images, no SVG and no JavaScript.
Layout Advanced
CSS Geometric Art
An animated solar system built entirely with CSS: orbiting planets, a glowing star, no SVG and no JavaScript.
//files
index.njk
global.css
eleventy.config.js
⠿
//preview
Layout Beginner
Split Panel
Two side by side panels where the left one can be drag resized using CSS resize: horizontal, with no JavaScript.
⚡
Scroll-driven animations
No JavaScript required.
🎨
CSS custom properties
Dynamic theming in CSS.
📦
Container queries
Component-scoped layouts.
Layout Advanced
Scroll-Triggered Reveal
Elements fade and slide up as they enter the viewport using the CSS scroll-driven animation-timeline: view() property.