Atlas / Showcase
Things people built with CSS only, no JavaScript. Open any one to see it running and the CSS it uses.
Submit a penType
CSS
- scroll-driven
by Cyd StumpelGekke zoom dingen
Scroll to zoom deep through layers, parallax with a twistscroll-drivenanimation-timelinezoomscale - scroll-driven
by Chris BolsonCircular typographic scramble
Scroll and scattered letters snap into a circular sentencescroll-driven3Danimation-timelinesibling-index() 
AdSponsored by LogfolioLog and track everything you read and watchBooks, films, games and more on one page.Start your log →- interactive
by Jhey TompkinsWorking stopwatch
A stopwatch that keeps real time, counted by CSS animationsinteractiveanimation:checkedcounter() - animation
by Kiarash ZarinmehrDancing skeleton
A small skeleton that never stops dancinganimationarttransformborder-radius - animation
by Ricardo Oliva AlonsoPainter
A painter at his easel, drawn and animated in CSSanimationartborder-radiuslinear-gradient The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
- animation
by Henry DesrochesSea drawing
A colourful seascape with gently rolling wateranimationartlinear-gradientborder-radius - animation
by Julia MioceneWindmill
A countryside windmill with turning sails, drawn in CSSanimationarttransformlinear-gradient - animation
by Agatha CohenLittle Witch
A witch's kitchen full of tiny moving details, watch the windowanimationartborder-radiusradial-gradient - animation
by annampawlSewing machine
A sewing machine that stitches away, drawn in CSSanimationartborder-radiuslinear-gradient - animation
by leimapapaThe Turin Horse
A horse and cart in a storm, after Bela Tarr's filmanimationartlinear-gradientfilter - 3D
by Ben Evans3D room
A furnished room in 3D, made only with HTML and CSS3Dartperspectivetransform-style - games
Best in Chromeby Ben EvansCTRL ALT ELITE
Elite from 1984, played with Alt and the original keysgames3D:checkedtransform-style - 3D
by Amit SheenDepth scrolling
Scroll forward through panels set at different depths3Dscroll-drivenperspectivetransform - art
by Ben EvansKing of Hearts on scroll
A drawn playing card that turns as you scrollartscroll-drivenanimation-timelinebox-shadow - interactive
by Jhey TompkinsRussian doll bears
Open each bear to find a smaller one inside, then resetinteractiveart:checkedtransition - 3D
by maxi83cPikachu in a box
Open the 3D box and Pikachu pops out3Dinteractivetransform-styletransition - 3D
by Jhey Tompkins3D package toggle
A cardboard box that folds, tapes and flips itself, in order3Dinteractive:checkedtransform-style - 3D
by Amit SheenSnow globe
A 3D Christmas tree in a glass globe, built live on stream3Danimationtransform-styleperspective - 3D
by Ana Tudor3D teardrop gallery
32 photos orbit a teardrop path, placed with CSS trig functions3Danimationtransform-stylesin() - 3D
by Adam KuhnSpirited Away bathhouse
The Spirited Away bathhouse as a tilted 3D CSS scene3Dartperspectivetransform-style - 3D
by Jhey TompkinsOptimus Prime
Click the robot and it turns into a truck, then back again3Dinteractivetransform-style:checked - animation
by Julia MioceneNoodles
Chopsticks lift noodles from a bowl in an endless loopanimationartlinear-gradientborder-radius - animation
by Konstantin DenerzCosmic Dreams
A calm, layered space animation to watch with the music onanimationartradial-gradientfilter - animation
by Will BoydDomo dance party
A floor of dancing Domos, made just to play with CSS animationanimationart@keyframescustom-property - animation
by Julia MioceneBB-8
Star Wars' BB-8 droid, drawn and animated in pure CSSanimationartborder-radiusradial-gradient - animation
by Ben EvansThe CSS Sun
A glowing, animated sun made for a music video, in HTML and CSSanimationartradial-gradientbox-shadow - games
by Ben EvansYou Must Build a Lighthouse!
A puzzle game in HTML and CSS: can you finish the lighthouse?gamesart:checkedbox-shadow - 3D
by Adam Argyle3D spatial scroll zoom
Scroll to fly forward through layers set out in 3D space3Dscroll-drivenanimation-timelineperspective - 3D
by Adam ArgyleScroll-driven tri-gyro
Scroll to spin a three-ring 3D gyroscope, all in CSS3Dscroll-drivenanimation-timeline@property - animation
by Chris BolsonArtemis 2 launch
Scroll the page to launch the Artemis rocket into spaceanimationscroll-drivenanimation-timelineclip-path - games
Best in Chromeby Ben Evans3D maze
A 1990s-style first-person maze with lifts, in CSS and no JSgames3Dperspectivetransform-style - illusions
by JosetxuPenrose triangle
An impossible triangle with a granite texture from two gradientsillusions3Dtransform-styleconic-gradient - art
by Gemma CroadRise & Steam
Wake up sleepy kawaii dumplings, with a mouse or the keyboardartanimationborder-radiusradial-gradient - animation
by Mergim UjkaniDocker whale
The Docker whale swims and leaps out of the sea in pure CSSanimationtransformlinear-gradientradial-gradient - games
by Jhey TompkinsConnect 4 with :has()
Play a full game of 3D Connect 4 run by :has() and countersgames:has():checkedcounter() - art
by Vicio BonuraCSS Animated Light & Shadow
Watch shadows move with a light source, made with box-shadowartbox-shadowlinear-gradientradial-gradient - 3D
by Julia Miocene3D cat
A cat sculpted in three dimensions with nothing but CSS3Dtransformperspectivetransform-style - 3D
by Julia MioceneThe Creation of Adam in 3D
Michelangelo's famous hands, rebuilt as a 3D CSS model3Dtransformperspectivetransform-style - art
by Julia MioceneMosquito
A detailed mosquito buzzing around the screen in pure CSSarttransformborder-radiuslinear-gradient - art
by Mergim UjkaniKurzgesagt submarine
Move your mouse and the submarine's lights follow, with no scriptartborder-radiuslinear-gradientradial-gradient - art
by Sarah FossheimPolaroid camera
A Polaroid camera painted from layered CSS gradients and shadowsartlinear-gradientradial-gradientconic-gradient - games
by Ben EvansThe Backrooms
A playable horror maze in HTML and CSS, with no JavaScript at allgamestransformperspectivetransform-style - 3D
by Ben EvansMario 64
The Super Mario 64 intro screen, rebuilt with 3D CSS transforms3Dtransformperspectivetransform-style - art
by Ben EvansCodePen TV
A retro TV you can poke at, with every button working in CSSartborder-radiusradial-gradientlinear-gradient