Making a Grid Pulse Background Using Pure Tailwind CSS

The Problem

There is a fine line between a boring website background and one that makes you dizzy. I’ve always been obsessed with that "digital heartbeat" aesthetic—the kind of thing you see in sci-fi UI design or cyberpunk dashboards. I wanted my personal site’s index page to feel alive, but I didn't want to spin up a heavy WebGL library or load a massive video file just to set a vibe.

So, I built a living, breathing grid using nothing but Tailwind CSS and a few lines of vanilla CSS animations. It’s lightweight, it supports dark mode, and it looks like data is flowing through the veins of the browser.

Here is a demo in action. Notice how the hardware acceleration (will-change) keeps it buttery smooth even when multiple beams cross paths.

The Foundation: Drawing the Graph Paper

The first step was creating the actual grid. You might think we need an SVG pattern here, but CSS linear gradients are actually powerful enough to do the heavy lifting. I used Tailwind’s arbitrary value syntax to stack two background images. One gradient draws the vertical lines, and the other draws the horizontal lines.

By setting the size to 40px_40px, we create a repeating pattern. I also set the line color to a very faint gray with rgba(128,128,128,0.1). This is crucial because you want the grid to be subconscious context, not the main character. It sits there in the background, providing structure without screaming for attention.

The Spark: Creating the Beams

A static grid is just graph paper. To make it look like a digital system, we need energy moving through it. This is where the "beams" come in.

These aren't complex canvas drawings. They are literally just absolute-positioned divs with a very specific background gradient. The magic happens in the bg-gradient-to-r. We go from transparent, to our primary color, and back to transparent. This creates a "comet tail" effect where the beam has a soft leading edge and a fading trail.

I also added a blur-[1px] and a drop shadow using the same primary color. This gives the beams a glowing, neon quality, like a lightsaber moving across the screen.

Choreographing the Chaos

If all the beams moved at the same speed, it would look like a screensaver from 1998. To make it feel organic, I created two custom keyframe animations: beam-h for horizontal movement and beam-v for vertical.

The animation logic is simple but effective. The beams start off-screen (translated -100%) and invisible. As they travel across the viewport to 100vw or 100vh, I tweak the opacity. They fade in quickly to about 60% opacity and then fade out again before they hit the end. This prevents them from jarringly popping out of existence at the edge of the screen.

I scattered several of these beam divs across the DOM and gave them wildly different animation-duration and animation-delay values directly in the inline styles. One beam takes 16 seconds to cross the screen; another takes 10. Some wait 3 seconds before starting. This randomness makes the grid feel busy and unpredictable.

The Finishing Touch: The Vignette

Finally, to tie it all together, I slapped a massive radial gradient over the whole thing. It starts transparent in the center and fades to the solid background color at the edges.

This is a classic photography trick, but in UI design, it serves a functional purpose. It fades the grid lines out as they approach the edge of the screen, making the content in the center the focal point. It stops the grid from looking like an infinite Excel spreadsheet and turns it into a spotlight.

Why I Love This Approach

What I really dig about this setup is that it respects the user's machine. We are using CSS transforms for the animation, which the browser can offload to the GPU. It’s also completely responsive. Because we used percentages and viewport units (vw, vh), the grid breathes and resizes whether you are on a massive 4k monitor or a smartphone.

If you are using Tailwind, you can drop this right into your main layout file. Just make sure to adjust your primary colors in your tailwind config to match your brand, and you instantly add a layer of depth to your UI that static colors just can't compete with.