CODEWITHSUNDEEP
cssrandomcolors
Arch1tect
Arch1tect

Reputation: 4281

Generate random color with pure CSS (no javascript)?

Is it possible to generate random color with pure CSS and without using javascript? It's probably impossible but I'm still curious.

Upvotes: 48

Views: 125021

Answers (5)

alextrastero
alextrastero

Reputation: 4280

As bosco-mabutao mentioned, without a script you cannot currently achieve dynamism, however, if you inject an inline script within your index.html before loading react it will be instant and you won't see the pink background.

function setRandomBackground() {
  const colors = [
    "#ffd7d5",
    "#ffe9d6",
    "#ffffd1",
    "#d6ffda",
    "#d7eeff",
    "#dad6ff",
    "#ffd6e8",
    "#f5f5dc",
    "#f4e4e4",
    "#e4e6f4" 
  ];

  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = randomColor;
}

setRandomBackground();

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

This isn't really possible in pure CSS.

However, using a pre-processor like SASS (example) or LESS (example) can generate random colors for you because they are built using scripting languages. Keep in mind that this value is then not random for each user or visit, unless the CSS file is generated for each user or visit individually (which is less common).

One side note is the possibility for using CSS variables. We can declare a CSS variable by saying:

html {
  --main-bg-color: brown;
}

and use it like so:

html {
  background-color: var(--main-bg-color);
}

Now we can change it using JS:

// From http://stackoverflow.com/a/5365036/2065702
const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

document.documentElement.style.setProperty('--main-bg-color', randomColor);

Note that you can also create CSS variables for specific elements, not just the root document element.

Or you could use a completely different way of selecting a random color (like user input). This allows for possibilities like theming.

Upvotes: 19

DIGmetrics
DIGmetrics

Reputation: 61

Not exactly random but with CSS:

Step 1 - Select queried backgrounds, order them in sequence and adjust the frequency

    @keyframes bgrandom {
    0% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
    50% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }

    55% { background: linear-gradient(90deg,  rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
    80% { background: linear-gradient(90deg, rgba(255,255,255,0.96)  50%, rgba(255,255,255,0.98) 0%); }

    85% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
    100% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
    }

Step 2 - Launch the animation(length animationName repeatMode)

    #element{  animation: 1.2s bgrandom infinite; }

Easy to use, customize and works great. Similar technique can be used for sliders, spinners, etc.

Upvotes: 6

Jono
Jono

Reputation: 171

<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>

Using PHP

Upvotes: 5

Bosco Mabutao
Bosco Mabutao

Reputation: 83

Not really. Dynamism can only be implemented with the support of scripting.

Upvotes: 6

Related Questions