// purecss.com

CSS does more
than you think.

77 interactive UI patterns, zero JavaScript required.

examples
Pure CSS
JavaScript
Browse Examples ↓
Form Intermediate

Toggle Switch

A styled on/off toggle built with a checkbox and CSS.
Form Intermediate

Floating Labels

Form labels that float above the input on focus using :placeholder-shown.
Form Intermediate

Star Rating

Clickable star rating using radio inputs and the general sibling combinator.
Navigation Beginner

Expandable Search

A search bar that expands on focus with a smooth CSS transition.
Hidden content revealed!
Layout Beginner

Show / Hide Content

Toggle visibility of content using a checkbox and the ~ combinator.
Theme preview area
Feedback Intermediate

Dark / Light Mode

A theme switcher built from a checkbox, CSS custom properties and no JavaScript at all.
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.
Design panel content.
Code panel content.
Navigation Intermediate

Tab Navigation

Tabbed interface using radio inputs and the :checked pseudo-class.
Hover over me
Feedback Beginner

Hover Tooltip

Tooltips on hover built from CSS pseudo-elements and a data-tip attribute, with no JavaScript.
Form Beginner

Custom Checkboxes

Fully styled checkboxes using appearance:none and :checked.
Form Beginner

Custom Radio Buttons

Styled radio buttons without any images or JavaScript.
Form Intermediate

Styled Range Slider

A custom-styled range input using CSS track and thumb pseudo-elements.
CSS
HTML
JS
Rust
Feedback Intermediate

Progress Bars

Animated progress bars built from the native <progress> element and CSS, with no JavaScript.
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.
Feedback Intermediate

Skeleton Loader

An animated placeholder loading state built from CSS keyframes and a moving gradient, with no JavaScript.
Menu
Item one Item two Item three
Navigation Beginner

Hover Dropdown Menu

A navigation dropdown that opens on hover using :hover and visibility.
Open Modal
Layout Intermediate

Modal Dialog

A modal using :target to show/hide without JavaScript.
☰ Menu
✕ Close Home About Work
Navigation Intermediate

Off-Canvas Navigation

A slide-in navigation panel using a checkbox and CSS translate.
Form Intermediate

CSS Input Validation

Real-time form validation feedback using :valid, :invalid, and :user-invalid.
Examples
Pure CSS
Feedback Advanced

Animated Number Counter

Numbers that count up using @property, CSS counters, and animations.
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.
Reading Progress
The Future of CSS Scroll-driven animations tie progress directly to scroll position, no JavaScript. The browser maps the scroll range automatically.
Navigation Advanced

Scroll Spy Indicator

A reading progress bar that tracks scroll position using CSS scroll-driven animations.
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>.
1. Info 2. Details 3. Done
Next →
Form Intermediate

Multi-Step Form

Radio inputs control which step panel is visible, with no JavaScript and no page reload.
Form Beginner

Styled Select Dropdown

Custom <select> appearance using appearance:none and an inline SVG background arrow.
Form Beginner

Styled Date Input

Custom styling for <input type="date"> including the calendar icon via CSS pseudo-elements.
Form Beginner

Numeric Stepper

A styled <input type="number"> with custom spin button appearance using CSS pseudo-elements.
Form Beginner

Color Swatch Picker

Radio buttons styled as color circles with a :checked ring indicator, and no JavaScript.
Contents
Intro
Install
Usage
API
Intro
Sidebar uses position: sticky to stay visible while content scrolls.
Install
No dependencies. Copy CSS into your project.
Navigation Beginner

Sticky Sidebar

A sidebar that sticks to the viewport while scrolling using position: sticky.
Navigation Beginner

Breadcrumb Trail

Navigation breadcrumbs with ::before arrow separators using CSS content.
←
1
2
3
4
→
Showing results 11-20 of 48
Navigation Intermediate

Pagination Component

Numbered page buttons with an active state driven by radio inputs and :checked.
Overview
Features
Pricing
Support
Overview
Vertical tabs organize content into logical sections. Click a tab label to switch panels.
Navigation Intermediate

Vertical Tabs

Vertical tabbed navigation using radio inputs and the :checked pseudo-class.
Type here...
✓ Looks goodMax 20
Form Intermediate

Character Count Indicator

Input border changes color based on validity using :user-invalid and :user-valid with minlength/maxlength.
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.
Feedback Beginner

Loading Spinners

Four spinner variants (ring, dots, bars, and orbit) built entirely with CSS animations.
Elastic
Spring
Linear
Layout Intermediate

Elastic Bounce

A ball that bounces with a spring-like overshoot using a custom cubic-bezier easing.
7
Seconds
Feedback Advanced

Countdown Timer

A visual countdown using @property integers, CSS counters, and steps() animation.
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.
🗑 Delete Account
Are you sure? Cancel
Feedback Intermediate

Confirm Button

A two-stage destructive action button that uses a checkbox to reveal the confirm step.
✓ Changes saved successfully! ✕
ℹ Session expires in 5 minutes. ✕
Feedback Intermediate

Toast Notification

A slide-in notification using :target to trigger and a CSS animation to auto-dismiss.
ℹPassword expires in 7 days.
✓Profile updated successfully.
⚠You have unsaved changes.
✕Connection failed.✕
Feedback Beginner

Alert Banners

Info, success, warning, and error alert variants styled with CSS custom properties.
Top ↑
Tooltip above
Right →
Right tip
Bottom ↓
← Left
Feedback Intermediate

Tooltip Directions

Tooltips pointing top, right, bottom, and left using ::before and ::after pseudo-elements.
Pure CSS Golden Shimmer // loading content...
Feedback Beginner

Text Shimmer

A moving gradient shimmer across text using background-clip: text and CSS keyframes.
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.
Building…
▶ Deploy
Feedback Intermediate

Progress Button

A button that animates a fill on click using a checkbox and transform: scaleX(), a state machine built entirely in CSS.
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.
↓ scroll to shrink the header
Navigation Intermediate

Shrinking Header

A sticky header that shrinks its height and text on scroll using CSS scroll-driven animations, with no JavaScript.
A
AJ
Alice JohnsonDesign
AM
Alex MorrisEngineering
AW
Amy WuMarketing
B
BC
Ben CarterEngineering
BL
Beth LeeDesign
C
CK
Chris KimProduct
CM
Clara MillsDesign
D
DJ
Dana JonesMarketing
DS
Drew SmithEngineering
Navigation Beginner

Sticky Section Headers

Section headings that pin to the top of the scroll area as you scroll past them, contacts-list style, in pure CSS.
DIFFERENCE
Layout Advanced

Difference Blend Mode

Animated mix-blend-mode: difference: a sweeping bar inverts text while orbiting circles subtract color channels.
Before After
Layout Intermediate

Before and After Slider

A draggable before and after image comparison built with resize and overflow, plus toggle and hover variants.
New this week
Layout Intermediate

Rotating Starburst

A slowly rotating starburst drawn from one repeating-conic-gradient, with a clip-path badge and a background burst variant.