CSS code experiments that take coding to the next level

If you’ve started to code a long time ago, some of the snippets on this page won’t surprise you that much. Not that they wouldn’t be impressive, but because you are already used to the tech advancements in web design.

For those of you who are beginners, though, some of these below may seem a bit sci-fi.

Enjoy these wonderful snippets and use them in your websites. Make sure to check if they look good across all the browsers.

Sliders

Rage Slider

Unicycle Range Slider

Rolling Range Slider

Vertical Slider

Range slider with dynamic icons

Typography

Layered text-shadow effect CSS

Cards and hover animations

Card Hover Interactions

Stacked rainbow cards

Product Card – Three JS

Article Deck

Forms and Pagination

Pagination with morphing numbers

3D Textbox

Password Input Light

Birthday input with zodiac

Buttons and navigation

Toggle animation with CSS & State Machines! Live collaborative coding with the @keyframers

Smash to submit button

Tilt Toggle

Folding Select Dropdowns

Night & Day

Neuomorphic Checkboxes

Tabbar animation – Only CSS

“Toss” Add to Cart Animation

Button – Hold to confirm

3D Button

Paw Clap Button

Checklist

Checklist animation

Neumorphic Radio

CSS illustrations

Parish

Full Moon in Paris?

Saturn

snowyLandscape – created by pure JavaScript and canvas

Animated Night Hill Illustration – Pure CSS

Steam spooky house

Only CSS: Sunset Bird

Games and experiments

Cat and Mouse

Liquid Grid

Pure CSS Claw Crane

What’s behind ?

Calm Spikes

Unsubscribe game

Tangram Memory Game

Waves (SVG)

subscribercoaster

CSS Goey footer

CSS Hangman using :checked [CPC]

Dual Triangle Preloaders

Svelte Infinity Maze

A matter of gravity