villa.ui

Nova AI

Projects

Glass UI Kit

Landing Page

Today

Yesterday

Viraag N

Pro

Nova AI

I want to add a frosted glass sidebar to my Next.js app. The backdrop blur needs to be performant. What's the best approach?

For a performant frosted glass sidebar, you want a multi-layer approach. The key is to isolate the blur layer from the content layer so the browser can optimize compositing.

Here's the recommended glass recipe:

css

.glass-sidebar {
  /* Layer 1: Frosted blur */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);

  /* Layer 2: Edge refraction */
  border-right: 1px solid rgba(255, 255, 255, 0.2);

  /* Layers 3+4: Depth */
  box-shadow:
    0 0 4px 0 rgba(255, 255, 255, 0.9) inset,
    4px 0 24px 0 rgba(0, 0, 0, 0.06);
}

A few performance tips:

• Use `will-change: transform` on the sidebar to promote it to its own compositor layer
• Avoid animating the blur radius — keep it static
• Use `overflow: clip` instead of `overflow: hidden` to prevent unnecessary paint invalidation
• The `saturate(140%)` adds richness without extra cost since it's part of the same filter pipeline

Nice. How do I handle the border radius subtraction for nested glass panels inside the sidebar?

The radius subtraction rule keeps nested glass looking physically correct. The inner radius should equal the outer radius minus the padding between them:

tsx

function GlassPanel({ children }: { children: React.ReactNode }) {
  const outerRadius = 24;
  const padding = 12;
  const innerRadius = outerRadius - padding; // 12px

  return (
    <div style={{
      borderRadius: outerRadius,
      padding: padding,
      background: "rgba(255, 255, 255, 0.4)",
      border: "1px solid rgba(255, 255, 255, 0.15)",
    }}>
      <div style={{
        borderRadius: innerRadius,
        background: "rgba(255, 255, 255, 0.25)",
      }}>
        {children}
      </div>
    </div>
  );
}

If the inner panel also has padding with nested content, continue the subtraction chain. Never go below `4px` for inner radius — it starts looking off at that point.

Nova can make mistakes. Verify important information.