Apple Liquid Glass

Native Apple Liquid Glass using the -apple-visual-effect CSS property from iOS 26. Works in Safari on iOS 26+ with backdrop-filter blur fallback for other browsers.

Preview

Loading preview…

Customize

Radius20

"use client";

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

type AppleGlassProps = {
  radius?: number;
  className?: string;
};

export default function AppleGlass({
  radius = 20,
  className,
}: AppleGlassProps) {
  return (
    <div
      className={[styles.panel, className].filter(Boolean).join(" ")}
      style={{ borderRadius: radius }}
    />
  );
}