Gravitational Lens Black Hole — CSS Warp Animation with Source Code

The Gravitational Lens (Black Hole) effect is a cinematic background interaction that simulates the bending of light around a massive object. As the user moves the “singularity” around the screen, the underlying grid and content appear perfectly distorted, creating a high-fidelity science-fiction aesthetic.

How It Works

This effect pushes the boundaries of modern CSS. It uses the backdrop-filter property combined with blur, contrast, and scale. The “Lens” itself is a circular div with a massive radial gradient mask. The backdrop-filter applies a distortion to whatever is behind the element. By scaling the backdrop content (scale(1.5)), we create the illusion of magnification and light bending (gravitational lensing).

Use Cases

• Backgrounds for futuristic or sci-fi themed websites
• Interactive product reveals (e.g., a “searchlight” or “lens”)
• Creative personal portfolios for developers and designers
• Atmospheric transitions in gaming or entertainment web apps

How to Customize

• Lens Size: Increase or decrease the width and height of the .hole class.
• Warp Intensity: Modify the scale(...) value in the backdrop-filter. Higher values will create more extreme distortion.
• Event Horizon Glow: Customize the box-shadow of the .event-horizon to change the “accretion disk” colors.

Frequently Asked Questions

Is this performance heavy?

backdrop-filter can be resource-intensive on older GPUs because it requires the browser to re-render the pixels underneath a moving element in real-time. It is recommended to use this effect for primary hero sections or interactive footers rather than as a persistent background on performance-critical pages.

Does it work on Firefox?

Yes, backdrop-filter has been supported in Firefox since version 103 (2022). It works seamlessly in Chrome, Edge, and Safari as well.

Can I warp text with it?

Absolutely. Anything placed in the .grid or background layers will be warped by the black hole as it passes over. This includes text, images, and other CSS animations.