There is no doubt that web design innovations come from people messing around, and some of these things show some of the awesome things you can do with CSS and Javascript today. In this post i have collected 30 very impressive CSS experiments from across the web that will make you say “wow” !

Dynamic Image Colorizing with <input type=”color”>

Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.

Perspective Scrolling in CSS

A 3 dimensional scrolling experience built in CSS only. The trick is to rotate a single element around its x-axis, while its parent provides the perspective environment and a special perspective-origin.

Pure CSS content filter

for a simpler effect with fewer lines of CSS, trade the width, height, padding, margin, and opacity properties in each checked input style for “display:none;” — these styles were just set to have a nice tranisition between filters.

Vertical center

Vertical center any element you want with just three lines of CSS.

Super Simple CSS Tooltips

Modal

Example of modal in CSS only, here we use the pseudo selector “:target” and no javascript for modal action.

CSS Kitty Toggle

Life is too short for boring checkboxes.

Pure CSS Toggles

CSS Search Field Animation

CSS-only Coffee App Concept

An original coffee app design demonstrating data-driven SCSS and meaningful transitions in an informational app about various espresso drinks.

Parallel park

This is a step by step tutorial on how to perfect parallel park using only css.

CSS-only Calendar App Concept

Pure CSS Progress

a pretty liquid progress-bar.

Simple 3D Menu

Color Extraction Effect

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.

CSS True Titles

Useful CSS experiment with masking & clipping.

Flipside

A button that seamlessly transitions from action to confirmation.

Netflix Logo In CSS

The netflix logo animation in pure CSS.

Simpsons in CSS

Chris Pattle created some characters from The Simpsons in pure CSS. See his inspiring CSS creations and the code that makes them work.

Clippy

Clippy is a tool for generating values for shape functions for the new and cool CSS clip-path property.

A single DIV

A CSS drawing experiment to see what’s possible with a single div.

Motion Blur Experiment

Experiment with motion blur applied to a modal window, using SVG filters.

Silon

Silon is an experiment in the true power of CSS selectors. Most people would not expect CSS selectors to be capable of expressing arbitrary boolean logic.

CSS space shooter

An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms.

Blackout

Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.

X-ray

Squiggly

Pure CSS content filter

Elastic stroke CSS + SVG

Rotate Clock

Isometric experiment