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

Feedback Intermediate

Dark / Light Mode

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

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

Navigation Intermediate

Tab Navigation

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

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

Feedback Intermediate

Progress Bars

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

Reveal content

The secret is revealed!

Content that reveals on click using a checkbox as state.

Click-to-Reveal

Hover me

Back side!

Layout Intermediate

3D Card Flip

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

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

Feedback Intermediate

Skeleton Loader

Animated placeholder loading state using CSS keyframes.

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

Hover Dropdown Menu

Layout Intermediate

Modal Dialog

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

☰ Menu

✕ Close

Navigation Intermediate

Off-Canvas Navigation

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

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

Layout Intermediate

Glitch Effect

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

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

New