Randomly Place an Element Along Edge of Another Element
We can animate an element along the border edge of another element to random positions… pretty easily? Might as well be a cute dog.
We can animate an element along the border edge of another element to random positions… pretty easily? Might as well be a cute dog.
I had fun with the post about making a link to a random post in just HTML/CSS the other day. But I was almost certainly over-thinking it on the original. Using random() was kind of the point, so we can stick with that.
Perhaps this theoretical button wasn’t a button at all, but 50 links in a trenchcoat.
There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.
If you thought 2024 was packed with amazing new CSS, well, you’re right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.
(Only Safari Technical Preview!)
Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.
Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.