Blur Effect with React, CSS, and JS | Tutorial 2022 | Code with Beto

In this video, I show you how to create an attractive blur effect with React, CSS, and JavaScript that generates random colors. The app renders color spheres that change on every reload for a dynamic, modern background.

This tutorial is ideal if you want to combine JavaScript logic with CSS for visual effects in React without external libraries. I also cover flexible styling and centering with CSS.

What's inside

Introduction and blur effect project goals
Function to generate random hex colors
Dynamic array of spheres with unique colors
Rendering spheres in React with keys and styles
CSS for background, size, and positioning
Flexbox to center and organize elements
Max width and app centering
Final blur tweaks and visual polish

Introduction and blur effect project goals

We build a blur effect in React and CSS where the background uses random colors on each reload. The idea is a card with colored spheres that feel modern and dynamic.

No external libraries: React for structure, CSS for styling, JavaScript for color logic. A good exercise in combining the three.

Function to generate random hex colors

A helper generates random hex colors: a prefix plus six hex characters from 0-9 and a-f.

A loop runs six times, picking random indices with Math.floor and Math.random. The result is valid CSS color values.

Dynamic array of spheres with unique colors

We create an array of 15 sphere slots, then map each entry to a random color from the helper.

Fifteen unique hex colors feed the sphere backgrounds for a varied look.

Rendering spheres in React with keys and styles

renders a div per color with index keys to satisfy React.

Inline uses each hex value. Each sphere gets its own color dynamically.

CSS for background, size, and positioning

CSS classes style the background container and spheres. The container is absolutely positioned behind content and fills the screen.

Spheres have fixed size, border radius, and blur filter. The page has a base background and a bordered card.

Flexbox to center and organize elements

Flexbox with column direction, centered align and justify keeps spheres and text centered at any window size.

limits card width; centers it horizontally.

Max width and app centering

The card is 700px. Height uses full viewport height.

Horizontal centering prevents the card from drifting on wide screens.

Final blur tweaks and visual polish

Background spheres use soft blur with absolute positioning and z-index so content sits on top.

Each reload gives a new set of blurred color spheres behind the card for a modern React UI effect.

Resources

CourseReact course

Learn React from fundamentals to advanced concepts with practical projects.

Premium resourcePro membership

Exclusive content, projects, and support to level up your skills.

Let's connect!