Websites Need More Mario UI
TL;DR
A short recreation of the animated background from a Mario level-complete screen using CSS repeating patterns, gradients, and a sawtooth edge. The video walks through each visual layer and the tricks that make seamless looping work. ---
Key Concepts
Repeating background pattern
tap to reveal ↩
A tileable image where half-shapes placed on opposite edges create a seamless tile when repeated
CSS background-size + animation
tap to reveal ↩
Setting a small
background-size causes automatic repetition; animating background-position creates the illusion of continuous movementVignette/fade overlay
tap to reveal ↩
An absolutely-positioned gradient that is transparent in the center and opaque at the edges, making pattern elements appear to emerge and disappear naturally
Diagonal stripe pattern
tap to reveal ↩
A
linear-gradient-based repeating stripe; the trick is animating its position across the container width so all stripes move in sync, producing a single flowing patternSawtooth edge
tap to reveal ↩
A CSS/SVG technique for a jagged bottom border; acknowledged as tricky to recall from memory
Notes
§Star Background Layer
- Draw a star tile with half-stars on top/left edges and the complementary halves on bottom/right edges
- Drop it in a
div— CSS will auto-repeat it to fill the space - Animate
background-positionfrom left to right over a slow duration (a few minutes) for subtle panning
§Color & Gradient Base
- Pick a couple of RGB values and build a gradient for the background color
- Place the gradient in a parent container so it sits behind the star layer
§Edge-Fade Overlay
- Create a second gradient that is transparent in the center, opaque at the edges
- Position it
absoluteon top of the star layer - Result: stars seem to fade in/out at the borders rather than hard-clip
§Diagonal Stripe Layer
- A diagonally striped
linear-gradientpattern — specifics are non-trivial to recall - Animate the pattern's
background-positionacross the full container width - Because the pattern repeats by default, all stripe squares move in sync → looks like one continuous moving surface
§Sawtooth Edge
- Final layer: a jagged/sawtooth bottom border
- Author is aware a CSS solution exists but finds the specifics hard to reproduce without reference
- Left partially open / implied use of a lookup or tool
Actionable Takeaways
- For any seamless looping pattern, place half-shapes on opposite tile edges — the browser's default
background-repeatdoes the rest - Use an absolutely-positioned center-transparent gradient overlay to soften pattern edges without clipping
- Animating
background-positionon a repeating gradient (not just an image) is enough to simulate a full-screen moving pattern cheaply - Keep a reference snippet for diagonal
linear-gradientpatterns and sawtooth edges — they're hard to reconstruct from memory
Quotes Worth Keeping
“
I have precisely zero interest in storing the knowledge required to produce a diagonally striped linear gradient pattern in my brain.
“
The combination of hundreds of these little squares moving in sync with one another gives the appearance of one singular pattern.