Skip to main content
CSS is fun and cool and I like it.

Are There Random Numbers in CSS?

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at runtime is the territory of JavaScript, not so much CSS. Or is it? If we factor in a little user interaction, we actually can generate some degree of randomness in CSS. Let’s take a look!… Read article “Are There Random Numbers in CSS?”


Randomizing SVG Shapes

Say we wanted to continuously randomize the radius of a circle. We could kinda fake a random look with just CSS, but let’s go for full-on pseudo-random numbers created in JavaScript.

We’re talking SVG here, so here’s our base circle:

<svg viewBox="0 0 100 100">
  <circle id="circle" cx="50" cy="50" r="50"></circle>

A little JavaScript function to generate random integers for us within a range:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);

To … Read article “Randomizing SVG Shapes”


Shuffle Children

$.fn.shuffleChildren = function() {
    $.each(this.get(), function(index, el) {
        var $el = $(el);
        var $find = $el.children();

        $find.sort(function() {
            return 0.5 - Math.random();




See the Pen
jQuery Shuffle Function
by Chris Coyier (@chriscoyier)
on CodePen.… Read article “Shuffle Children”