CSS is awesome

2015 → 2026

CSS is awesome

Three drawings made only of HTML elements and CSS. I drew two of them in 2015 and the rocket in 2021, then redrew all three in 2026 with what CSS can do now. Drag the divider on a drawing to compare the two versions, and read both stylesheets below it.

Each drawing also has an AI power switch: it turns the right side into the version I made with Claude Code, as good as we could get it in as little CSS as possible.

No. 1 · March 2015

Bicycle

Hover the 2015 bicycle and it rides through the desert, with a flickering neon sign. It only worked with a mouse. The 2026 one also rides on keyboard focus and on tap.

2015
Stylus compiled to CSS with vendor prefixes. The wheels turn through 11 keyframes generated by a loop. Hover only.
2026
Plain CSS. One rotate: 1turn keyframe, spokes drawn with a conic gradient, and the neon glow driven by one animated custom property.
Elements
34 → 17
AI power
2 elements. The frame, saddle and bars are one clip-path polygon, coloured by gradient bands. Road, dunes and spokes move at one speed, so the wheels roll instead of slide.
Modern CSS
nesting@propertyrotateconic-gradient:focusoklchreduced motion
2015 · styles.styl
Open styles.styl
2026 · bicycle.css
Open bicycle.css
AI power · bicycle.css
Open bicycle.css

No. 2 · March 2015

Loader

A loading bubble in the colours of an old social network. In 2015 the stripes moved only under the mouse, so a loader that should show “wait” stood still. The 2026 one always moves, unless you ask your system for less motion.

Loading…
2015
Eight rotated divs, floated and slid with margin-left. Two pseudo-elements with border tricks for the tails.
2026
A repeating gradient that slides by one stripe and loops. One clip-path draws the bubble and both tails.
Elements
11 → 2
AI power
1 element. Real text, so screen readers hear “Loading”. The stripes and a shine move in one loop, and the tail is one clip-path triangle.
Modern CSS
clip-pathrepeating-linear-gradientlogical propertiesreduced motion
2015 · box.styl
Open box.styl
2026 · loader.css
Open loader.css
AI power · loader.css
Open loader.css

No. 3 · June 2021

Rocket

Drawn in 2021 inside a React app: Sass for the styles, and JavaScript to scatter 100 star elements, new ones on every render. The 2026 rocket needs no JavaScript, and it lifts off as you scroll past it.

2021
Sass, and a React component that renders 100 star divs with random sizes and speeds. Some stars got a 0 s duration and never moved.
2026
Stars are three tiled gradients falling at different speeds, with a twinkle from an animated @property. Lift-off is a scroll-driven animation.
Elements
111 → 9
AI power
2 elements. The outline is one polygon; nose, fins, stripe and window are gradient layers inside it. The exhaust is a blurred teardrop that flickers.
Modern CSS
animation-timeline@propertytranslatescale@supportsreduced motion
2021 · Rocket.scss
Open Rocket.scss
2026 · rocket.css
Open rocket.css
AI power · rocket.css
Open rocket.css

About

The drawings are plain HTML and CSS with no build step. The 2015 and 2021 versions are the original files, shown in frames as they were, minus the music and a font I can’t share.

“Elements” counts the HTML elements in each drawing. Line counts skip comments and blank lines.

Source on GitHub. The React version from 2021 is kept at the tag legacy-2021.

Run it locally

  1. Clone the repository: git clone https://github.com/slimcandy/css3IsAwesome
  2. Serve the site folder with any static server: npx serve site
  3. To change the page styles, run npm install and npm run dev. The drawings themselves need nothing.