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

Those soft, blurry gradient backgrounds you see on modern landing pages? You can build one yourself with React, plain CSS, and a little JavaScript. No libraries. I render 15 color spheres that get new random colors on every reload, then blur them behind a card. I build the whole effect step by step in the video.

It's a fun exercise in making JS logic and CSS styling work together inside React.

What's inside

• Generate random hex colors with a small JavaScript helper
• Map an array of 15 spheres to unique colors on each render
• Blur and position the spheres with CSS filters, absolute positioning, and z-index
• Center everything with Flexbox and a 700px max-width card
• Get a fresh background on every page reload

Resources

CourseReact with TypeScript course

Take effects like this further: React fundamentals to advanced patterns with real projects.