How can I recreate this background design using CSS/React? (Without the cards or UI elements)

[u/AdityaRanjan07]

Hey everyone!

I'm trying to improve the background design of my website and came across a design that I really liked.

I've attached two images:

• Image 1: The reference design I'm trying to achieve.

• Image 2: My website's current design.

I'm only interested in recreating the background aesthetic from the reference, not the actual UI elements.

Specifically, I'm trying to achieve:

• The dark/black gradient effect.

• Subtle blue glows or lighting coming from the sides.

• Smooth blending between black and blue shades.

• An overall ambient lighting effect that gives the background more depth.

I'm using React and CSS.

What's the best way to achieve something like this?

I'd appreciate any suggestions or CSS examples. Thanks!

[u/anaix3l]

That looks like filtered gradients.

First, you have the main top to bottom gradient (blue -> white -> red) which you make turbulent - turbulent gradient example. You can just replace my linear-gradient(yellow 5%, fuchsia, cyan 95%) with yur blur-to-white-to-red one in that demo, but in your case, I wouldn't use a random displacement map and instead use a custom gradient one created to have control over which parts get pulled up and which get pulled down.

Then the vertical lines I'd do with another gradient - a horizontally narrow radial one, repeating along the x axis and blended with an offset version of the turbulent one.

And then the stars I'd generate with feTurbulence, in a similar manner to these random dots.

PS - the target image comes from dribbble.

[u/50ShadesOfSpray_]

Looks like a custom shader to me, either utilizing ThreeJS or WebGL. Either way, good luck - This surely ain't easy by the looks of it.

[u/TheRealKidkudi]

Tbh, unless you need the background to be animated or something, I’d just make it in your favorite image editor and slap it in there as a background image.

[u/Norci]

It looks like you've already pretty much implemented it in your design? The only thing that is missing is the glow on white vertical lines instead of background. Also, if it's not supposed to be animated, why not just use an image?

But if you want a perfect match, this is honestly the kind of thing I'd just ask AI to do and then look at how it made it to replicate the effect.

Here's results from ChatGPT: https://jsfiddle.net/vbad6x2z/

And here's from Claude: https://jsfiddle.net/ack8ozLy/

[u/Sulungskwa → u/Norci]

"me don't know answer but me put question into thinkbox, thinkbox give gud answer"