This “knockout” effect is one of the coolest things I’ve come across!

In today’s tutorial, I’m diving deep into a unique website effect I stumbled upon recently. While browsing for design inspiration, I discovered an amazing knockout card design on the Frame.xyz site. These cards featured a cool geometric pattern that allowed the glowing orbs behind them to shine through.

Naturally, I had to figure out how it was done and share it with you! Join me as I take you step-by-step through the entire process of replicating this knockout card effect on your own website.

We’ll cover everything from the initial setup to the detailed CSS required to achieve this look. And as a bonus, I’ll show you a creative adaptation that combines this effect with glassmorphism for an even more stunning result.