Radii FX

About

The most viral CSS tricks are scattered across YouTube Shorts, Instagram Reels, and CodePen. Radii FX puts 25 of the best effects in one skill. Name any effect — "gradient border", "animated product card", "glow halo", "frosted header", "liquid blob" — and get the complete, production-ready CSS immediately. Every effect includes a performance note (GPU-safe or not), browser support, and a prefers-reduced-motion override. The same effects you see in viral reels with 3000 likes, available in your codebase in seconds.

What it does

• 25+ named CSS effects: gradient border, glow halo, glass card, aurora background, shimmer shine, neon glow text, gradient text, grain texture, card hover lift, 3D card tilt, cursor glow, animated product card, typewriter, ripple click, scroll reveal, liquid blob, frosted header, image reveal, color-shifting border, and more
• Every effect includes complete HTML structure + CSS + minimal JS if required
• Performance notes on every effect: GPU-safe properties? will-change hints? Heavy effects are flagged
• Every animated effect includes a prefers-reduced-motion override that disables or meaningfully substitutes the animation
• Browser support notes: -webkit- prefixes for backdrop-filter, background-clip text, etc.
• Works from names ("gradient border"), descriptions ("glowing product card with colored halo"), or screenshots

Give it

• 1.An effect name: "gradient border", "glow halo", "glass card", "aurora", "shimmer"
• 2.OR a description: "card with hover lift and image zoom", "rotating rainbow border"
• 3.Optional: color preferences or brand colors to use in the effect

Example output

**Effect: Glow Halo**

```css
.glow-halo { position: relative; border-radius: 50%; }
.glow-halo::after {
  content: '';
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.6) 0%, transparent 70%);
  filter: blur(20px); z-index: -1;
  animation: glow-pulse 3s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { opacity: 0.6; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .glow-halo::after { animation: none; } }
```

Performance: ⚠️ Add will-change: opacity, transform if on scroll
Browser support: ✅ All modern browsers