Glass Effect

Component 68

About

Small glass CSS effect that I use on my website for a wow effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Effect to your project and fits it to your theme.

Code

How Glass Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Glass } from "@/components/ui/glass-effect"

function GlassDemo() {
  return (
    <div className="min-h-screen w-full flex items-center justify-center p-4">
      <div className="relative w-[400px] h-[400px] rounded-xl overflow-hidden">
        <div className="w-full h-full overflow-auto">
          <img 
            src="https://cdn.21st.dev/assets/mirror/e3/e394b20816248deda24981a8f38bca349577c509fffaaa50480e1044e6173e53.jpg"
            alt="Background"
            className="w-full min-h-[800px] object-cover"
          />
        </div>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
          <Glass>
            <span className="absolute inset-0 flex items-center justify-center text-white/80 font-medium">
              Scroll to see effect
            </span>
          </Glass>
        </div>
      </div>
    </div>
  )
}

export { GlassDemo }