Meet Rex Code Effects — 300 Ready-to-Use CSS Effects for Your Website

Building a modern, polished UI takes time. Every button hover, every loader, every card transition — they all add up. That's why we built Rex Code Effects: a growing library of 300 production-ready CSS effects you can drop straight into any project. Whether you're shipping a SaaS landing page, a dashboard, or a personal portfolio, you'll find something here that saves you an hour of fiddling with keyframes. Every effect ships with clean HTML and CSS — no JavaScript, no dependencies, no build step. Just copy, paste, and ship.

What's inside

The library spans 20 categories, each packed with 10+ hand-crafted effects. Buttons that glow and pulse. Loaders that orbit and fold. Glassmorphism cards with real backdrop blur. Neon signs that flicker. Glitch text with RGB-split distortion. 3D flip cards, animated gradients, magnetic hover effects — and that's just the start.

Live demos, not screenshots

Every effect renders inside an isolated iframe preview, so you see exactly what you're getting before you copy a single line. What you see is what you paste — no surprises, no broken styles leaking into your app.

The Playground

Found an effect you like but want to tweak the colors or timing? Open the built-in Playground editor. Edit the HTML and CSS side-by-side with a live preview that updates as you type. Tweak until it's perfect, then copy the final code or download it as a standalone .html file.

Built for rexai.site

Rex Code Effects is part of the rexai.site digital toolkit — a collection of tools and ideas built to help people work smarter. Browse the full library, copy what you need, and keep shipping.