Skip to main content
Randomness in CSS

Randomness in CSS

The majority of the languages have some mechanisms for generating random numbers. Unfortunately, that is not the case in CSS. This might not be a problem for most websites, but when dealing with a more generative approach (which CSS is really great for) we have to resort to JavaScript to generate random values. In his article, I will explore a nice way of generating it using only CSS.I will cover the following topics:Generating random numbers in CSSUsing random values to generate ranges of numbers and coloursGenerating effect like in the cover for this articleTo generate random values in CSS we need first to understand how the randomness in computers works. Computers cannot come up with a random number by themselves — they were designed to work in a very rigorous way — for a given input they return a set output. All they can do is generate pseudo-random numbers — the sequence of numbers that looks like it’s random but which still has some underlying rules behind it.An example of it might be the following function:f(x) = (A*x + c) mod 1;Aand c parameters can be adjusted to our liking. mod 1 is a notation meaning that we want to take a non-integer reminder of the number, for example 5.3 mod 1 = 0.3.The function will always give us results within the range of 0-1 which is handy because we can later scale it however we want without needing to change the function itself – when generating colours we will use different ranges when generating sizes in pixels.Let’s set A=8.385, c=2.534 then we will get the following pseudo-random sequence:fn(0) = 0.5339999999999998fn(1) = 0.9190000000000005fn(2) = 0.3039999999999985fn(3) = 0.6890000000000001fn(4) = 0.07399999999999807fn(5) = 0.4589999999999961fn(6) = 0.8440000000000012fn(7) = 0.2289999999999992fn(8) = 0.6140000000000043fn(9) = 0.9990000000000094fn(10) = 0.38400000000000034If you don’t know the underlying sequence the numbers generated by the function might look random.In this case, given enough values, it is easy to reverse engineer the function, but the real-life random functions are usually much more complex. You can use higher order polynomials, trigonometry function and whatever else you imagine… unless you are working in plain CSS.In CSS we do not have a big range of mathematical functions to operate on but we can still use some basic operations like sum and multiplication, and using @property we can perform floor, but there’s not much more than that. Fortunately, that’s more than enough to get satisfactory results.In our CSS random number generator, we will use the same technique but, to make the function less predictable, we will use a second-degree polynomial — meaning we will include an extra component of B*x^2.Moreover, our example will use sequential numbers to generate our random numbers. CSS does not natively offer us a mechanism to easily get the sequential numbers for each of the elements but, using the technique from my last article, we can generate it. The number will be stored as a –n CSS variable. For more information check out my previous article.Here’s the solution for our random number generator:The CodePen above plots the results of the function for the first 100 values.  » Read More

Like to keep reading?

This article first appeared on If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?


Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.