---
name: radii-fx
description: Generate CSS visual effects by name — gradient borders, glow halos, glassmorphism, aurora backgrounds, shimmer, 3D tilts, and 20+ more. Copy-paste production CSS every time.
version: 1.0.0
author: radii.cloud
---

# Radii FX — `/radii-fx`

> Generate any CSS visual effect by name. Say "gradient border" or "glow halo" or "animated product card" — get complete, production-ready CSS + HTML instantly.

## What this skill does

You are a CSS visual effects specialist. When invoked with an effect name or description, output:
1. Complete CSS (+ minimal JS when required)
2. HTML structure showing usage
3. Performance note: GPU-safe? `will-change` hints?
4. Accessibility: needs `prefers-reduced-motion`?
5. Browser support: any `-webkit-` prefixes needed?

**Rule for every animated effect:** Include a `@media (prefers-reduced-motion: reduce)` override that disables or meaningfully substitutes the animation. Never animate `width`/`height` — use `transform: scale()` instead.

---

## Effect library

### Gradient Border

Colored border that looks like a gradient — the element border itself shows the gradient, not just the background.

```css
.gradient-border {
  position: relative;
  border-radius: var(--radius-md, 12px);
  background: var(--color-ink-50);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px; /* border thickness */
  border-radius: calc(var(--radius-md, 12px) + 2px);
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
  z-index: -1;
}
```

**Performance:** ✅ GPU-safe. No animation needed for static version.

---

### Glow Halo

A colored glow emanating from behind the element — like a backlit product photo.

```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` to `::after` if on scroll.

---

### Glass Card (Glassmorphism)

Frosted glass effect — translucent background with blur.

```css
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
  }
}
```

**Performance:** ✅ GPU-accelerated via compositor. **Browser support:** Needs `-webkit-` prefix for Safari.

---

### Aurora Background

Animated color-shifting gradient background — like the northern lights.

```css
.aurora {
  position: relative;
  overflow: hidden;
}

.aurora::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #6366f1, #8b5cf6, #ec4899, #f59e0b, #10b981, #6366f1
  );
  filter: blur(60px) opacity(0.6);
  animation: aurora-spin 8s linear infinite;
}

@keyframes aurora-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}
```

**Performance:** ⚠️ Heavy — limit to hero sections only. Add `will-change: transform`.

---

### Shimmer Shine (Hover Effect)

A diagonal light sweep across an element on hover.

```css
.shimmer-hover {
  position: relative;
  overflow: hidden;
}

.shimmer-hover::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.shimmer-hover:hover::before { left: 150%; }

@media (prefers-reduced-motion: reduce) {
  .shimmer-hover::before { display: none; }
}
```

---

### Neon Glow Text

Vibrant text with a colored glow aura.

```css
.neon-text {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #6366f1,
    0 0 82px #6366f1,
    0 0 92px #6366f1;
}
```

**Accessibility:** Verify contrast against background — the glow can reduce readability. Test at full zoom.

---

### Gradient Text

Text filled with a gradient instead of a solid color.

```css
.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}
```

**Browser support:** Needs `-webkit-` prefix. Works in all modern browsers.

---

### Animated Gradient Border (Rotating)

A gradient border that continuously rotates around the element.

```css
.animated-border {
  position: relative;
  border-radius: var(--radius-md, 12px);
  z-index: 0;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md, 12px) + 2px);
  background: conic-gradient(from 0deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  z-index: -1;
  animation: border-rotate 3s linear infinite;
}

.animated-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-ink-50);
  z-index: -1;
}

@keyframes border-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .animated-border::before { animation: none; }
}
```

---

### Card Hover Lift

Subtle elevation on hover — the go-to interactive card pattern.

```css
.card-lift {
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .card-lift:hover { transform: none; }
}
```

---

### Animated Product Card

Card with image zoom + content slide-up on hover.

```css
.product-card {
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  position: relative;
}

.product-card__image {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.product-card__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--spacing-4, 16px);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card__image { transform: scale(1.05); }
.product-card:hover .product-card__content { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .product-card__image, .product-card__content { transition: none; }
  .product-card__content { transform: translateY(0); opacity: 0; }
  .product-card:hover .product-card__content { opacity: 1; }
}
```

---

### Cursor Glow (Spotlight Effect)

A radial glow that follows the cursor across a container.

```css
.cursor-glow {
  position: relative;
  overflow: hidden;
}

.cursor-glow::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  transform: translate(var(--x, -50%), var(--y, -50%)) translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.1s ease-out;
}
```

```js
document.querySelector('.cursor-glow').addEventListener('mousemove', (e) => {
  const rect = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty('--x', (e.clientX - rect.left) + 'px');
  e.currentTarget.style.setProperty('--y', (e.clientY - rect.top) + 'px');
});
```

**Performance:** ✅ CSS variable update is cheap. Use `will-change: transform` on `::before` for smooth movement.

---

### 3D Card Tilt

Card that tilts in 3D toward the cursor.

```css
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
```

```js
const card = document.querySelector('.tilt-card');
card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = (e.clientX - rect.left) / rect.width - 0.5;
  const y = (e.clientY - rect.top) / rect.height - 0.5;
  card.style.transform = `perspective(1000px) rotateX(${y * -12}deg) rotateY(${x * 12}deg)`;
});
card.addEventListener('mouseleave', () => {
  card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
```

```css
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transform: none !important; transition: none; }
}
```

---

### Typewriter Effect

Text that types itself out, character by character.

```css
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-accent-500);
  width: 0;
  animation: typing 2.5s steps(30, end) forwards,
             blink 0.75s step-end infinite;
}

@keyframes typing { to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .typewriter { width: 100%; animation: none; border-right: none; }
}
```

---

### Ripple Click Effect

Material-style ripple that expands from the click point.

```js
document.querySelectorAll('.ripple').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const ripple = document.createElement('span');
    const size = Math.max(rect.width, rect.height);
    ripple.style.cssText = `
      position: absolute; border-radius: 50%; pointer-events: none;
      width: ${size}px; height: ${size}px;
      left: ${e.clientX - rect.left - size/2}px;
      top: ${e.clientY - rect.top - size/2}px;
      background: rgba(255,255,255,0.3);
      transform: scale(0); opacity: 1;
      animation: ripple 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    `;
    this.style.position = 'relative'; this.style.overflow = 'hidden';
    this.appendChild(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
  });
});
```

```css
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ripple span { display: none; }
}
```

---

### Scroll Reveal

Elements fade and slide in as they enter the viewport.

```css
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
```

```js
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
```

---

### Liquid Blob

An organic shape that morphs continuously.

```css
.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morph 6s ease-in-out infinite alternate;
}

@keyframes morph {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%  { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50%  { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%  { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 70% 30% 46% 54% / 30% 60% 40% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; border-radius: 50%; }
}
```

---

### Grain Texture Overlay

Subtle noise texture that adds analogue warmth to flat surfaces.

```css
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  /* SVG noise filter */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px;
  border-radius: inherit;
}
```

**Performance:** ✅ Static — no animation. Zero motion concern.

---

### Frosted Header

Sticky navigation with background blur on scroll.

```css
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  transition: background 300ms ease, backdrop-filter 300ms ease;
  -webkit-backdrop-filter: blur(0px);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
```

```js
window.addEventListener('scroll', () => {
  document.querySelector('.header').classList.toggle('scrolled', window.scrollY > 10);
});
```

---

### Image Reveal on Scroll

Image that slides in from behind a clipping mask.

```css
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.visible { clip-path: inset(0 0% 0 0); }

@media (prefers-reduced-motion: reduce) {
  .img-reveal, .img-reveal.visible { clip-path: none; transition: none; }
}
```

---

### Color-Shifting Border

A border that slowly cycles through hues.

```css
.color-shift-border {
  border: 2px solid;
  animation: hue-cycle 4s linear infinite;
}

@keyframes hue-cycle {
  0%   { border-color: hsl(240, 80%, 60%); }
  33%  { border-color: hsl(300, 80%, 60%); }
  66%  { border-color: hsl(0, 80%, 60%); }
  100% { border-color: hsl(240, 80%, 60%); }
}

@media (prefers-reduced-motion: reduce) {
  .color-shift-border { animation: none; border-color: var(--color-accent-500); }
}
```

---

## Links

- radii.cloud/terms/animation
- radii.cloud/terms/glassmorphism
- radii.cloud/terms/blur-effect
- radii.cloud/terms/grain-texture
- radii.cloud/terms/aurora-background
- radii.cloud/terms/liquid-glass
- radii.cloud/terms/hero-animation
- radii.cloud/terms/gradient