Frosted Glass Soft Edges

Frosted glass with soft feathered edges using CSS mask-image and radial-gradient. The blur fades smoothly toward the edges instead of having a hard border.

Preview

Loading preview…

Customize

Blur16

Feather40

Radius20

"use client";

import styles from "./MaskedGlass.module.css";

type MaskedGlassProps = {
  blur?: number;
  feather?: number;
  radius?: number;
  className?: string;
};

export default function MaskedGlass({
  blur = 16,
  feather = 40,
  radius = 20,
  className,
}: MaskedGlassProps) {
  const inner = 100 - feather;
  const maskImage = `radial-gradient(ellipse at center, black ${inner}%, transparent 100%)`;

  return (
    <div
      className={[styles.panel, className].filter(Boolean).join(" ")}
      style={{
        borderRadius: radius,
        backdropFilter: `blur(${blur}px) saturate(180%)`,
        WebkitBackdropFilter: `blur(${blur}px) saturate(180%)`,
        maskImage,
        WebkitMaskImage: maskImage,
      }}
    />
  );
}