30 Very Impressive CSS Experiments

Unlimited Downloads : 300,000+ Design Assets

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.

Dynamic Image Colorizing

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.

Perspective Scrolling in CSS

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.

FILTER BY COLOR

Vertical center

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

Vertical center with only 3 lines of CSS

Super Simple CSS Tooltips

super simple CSS tooltip

Modal

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

CSS Modal

CSS Kitty Toggle

Life is too short for boring checkboxes.

CSS Kitty Toggle

Pure CSS Toggles

Pure CSS Toggles

CSS Search Field Animation

Search field animation with CSS

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.

CSS-only Coffee App Concept

Parallel park

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

Parallel park

CSS-only Calendar App Concept

calendar app

Pure CSS Progress

a pretty liquid progress-bar.

Pure CSS Progress

Simple 3D Menu

simple 3d menu

Color Extraction Effect

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

color-extraction-2

CSS True Titles

Useful CSS experiment with masking & clipping.

css-title-17

Flipside

A button that seamlessly transitions from action to confirmation.

flipside-3

Netflix Logo In CSS

The netflix logo animation in pure CSS.

netflix-4

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.

simpson-in-css-5

Clippy

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

clippy-6

A single DIV

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

single-div-7

Motion Blur Experiment

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

motion-blur-8

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.

logic-9

CSS space shooter

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

space-shooter-10

Blackout

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

blackout-1

X-ray

x-ray-11

Squiggly

Squiggly-11

Pure CSS content filter

css-filter-13

Elastic stroke CSS + SVG

elastic-14

Rotate Clock

rotate-clock-15

Isometric experiment

isometric-16


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked