CSS does more than you think.

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

Floating Labels

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

Star Rating

A search bar that expands on focus with a smooth CSS transition.

Expandable Search

Show content

Hidden content revealed!

Toggle visibility of content using a checkbox and the ~ combinator.

Show / Hide Content

Dark mode

Theme preview area

A theme switcher using a checkbox, CSS custom properties, and no JS.

Dark / Light Mode

What is Pure CSS?

Techniques that work without any JavaScript.

Does it work everywhere?

Modern browsers support all examples here.

Expandable content panels using the <details> and <summary> elements.

Accordion / FAQ

Tabbed interface using radio inputs and the :checked pseudo-class.

Tab Navigation

Feedback Beginner

Hover Tooltip

Tooltips on hover using CSS pseudo-elements and the data-tip attribute.

Option one Option two

Fully styled checkboxes using appearance:none and :checked.

Custom Checkboxes

Option A Option B

Styled radio buttons without any images or JavaScript.

Custom Radio Buttons

A custom-styled range input using CSS track and thumb pseudo-elements.

Styled Range Slider

CSS

HTML

JS

Rust

Animated progress bars using the <progress> element and CSS.

Progress Bars

Reveal content

The secret is revealed!

Content that reveals on click using a checkbox as state.

Click-to-Reveal

Hover me

Back side!

A card that flips on hover using CSS 3D transforms and perspective.

3D Card Flip

Smooth image zoom on hover using CSS transform and overflow:hidden.

Image Zoom on Hover

Pure CSS

Text filled with a gradient using background-clip:text.

Gradient Text

Animated placeholder loading state using CSS keyframes.

Skeleton Loader

A navigation dropdown that opens on hover using :hover and visibility.

Hover Dropdown Menu

A modal using :target to show/hide without JavaScript.

Modal Dialog

☰ Menu

✕ Close

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

Off-Canvas Navigation

Real-time form validation feedback using :valid, :invalid, and :user-invalid.

CSS Input Validation

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 →

A horizontal carousel using scroll-snap-type and scroll-snap-align.

Scroll Snap Carousel

16:9

1:1

4:3

Maintain a fixed aspect ratio on any element using the aspect-ratio property.

Aspect Ratio Box

Reading Progress

The Future of CSS

CSS has evolved dramatically. What began as a simple styling language now supports animations, scroll-driven effects, and so much more.

Scroll-driven animations let you tie animation progress directly to scroll position — no JavaScript required.

How It Works

The animation-timeline property accepts a scroll() function. The browser maps the scroll range to the animation's progress automatically.

A @keyframes from width: 0% to width: 100% becomes a reading progress bar with a single CSS property.

Navigation Advanced

Scroll Spy Indicator

A reading progress bar that tracks scroll position using CSS scroll-driven animations.

Glitch

An animated text glitch using clip-path, pseudo-elements, and CSS keyframes — no JavaScript.

Glitch Effect

Name	Role	Status
Alice Chen	Designer	Active
Bob Torres	Engineer	Pending
Carol Kim	Manager	Active
David Park	Analyst	Inactive

A table header that stays fixed while scrolling using position: sticky on <thead>.

Sticky Table Header

1. Info 2. Details 3. Done

Next →

Radio inputs control which step panel is visible — no JavaScript, no page reload.

Multi-Step Form

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

Styled Select Dropdown

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

Styled Date Input

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

Numeric Stepper

Radio buttons styled as color circles with a :checked ring indicator — zero JavaScript.

Color Swatch Picker

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

Sticky Sidebar

Navigation breadcrumbs with ::before arrow separators using CSS content.

Breadcrumb Trail

←

1

2

3

4

→

Showing results 11–20 of 48

Numbered page buttons with an active state driven by radio inputs and :checked.

Pagination Component

Overview

Features

Pricing

Support

Overview

Vertical tabs organize content into logical sections. Click a tab label to switch panels.

Vertical tabbed navigation using radio inputs and the :checked pseudo-class.

Vertical Tabs

✓ Looks goodMax 20

Character Count Indicator

Input border changes color based on validity using :user-invalid and :user-valid with minlength/maxlength.

Full-size image overlay using the :target pseudo-class — no JavaScript.

CSS Lightbox

Design

CSS

Anim

Layout

A horizontally scrollable content shelf with scroll-snap for clean stopping points.

Scroll Shelf

PURE CSS

NEON GLOW

Glowing neon text using layered text-shadow values and a flicker CSS animation.

Neon Text Effect

Hello, World! 👋

Pure CSS only

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

Typewriter Effect

🎉 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

An organic shape that continuously morphs using animated border-radius keyframes.

Morphing Blob

Layout Advanced

Particle Float

Floating particles using multiple elements with staggered CSS animation-delay values.

☔ CSS Rain

Animated rain streaks using absolutely-positioned elements and staggered @keyframes.

CSS Rain Effect

Ring

Dots

Bars

Feedback Beginner

Loading Spinners

Three spinner variants — ring, dots, and bars — built entirely with CSS animations.

Elastic

Spring

Linear

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

Elastic Bounce

7

Seconds

Feedback Advanced

Countdown Timer

A visual countdown using @property integers, CSS counters, and steps() animation.

Border drawn

Drawing...

A button whose border traces itself on hover using SVG stroke-dashoffset animation.

Border Draw Button

A button with a dramatic lift and shadow on hover using CSS transitions and @starting-style.

Magnetic Button

Filled →

Sweeping

An outlined button that fills with color from left to right on hover using a pseudo-element.

Ghost Button Fill Sweep

🗑 Delete Account

Are you sure? Cancel

A two-stage destructive action button that uses a checkbox to reveal the confirm step.

Confirm Button

New

✓ Changes saved successfully! ✕

ℹ Session expires in 5 minutes. ✕