A frosted-glass multi-line text field with five translucent/blurred surface variants (frost, tint, smoke, crystal, depth) for message boxes and comment forms over varied backgrounds.
import {
FrostTextarea,
TintTextarea,
SmokeTextarea,
CrystalTextarea,
DepthTextarea,
} from "@/components/ui/textarea-glass";
export default function TextareaGlassDemo() {
return (
<div
className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-10"
style={{
backgroundImage:
"radial-gradient(circle at 20% 20%, oklch(0.7 0.15 331), transparent 60%), radial-gradient(circle at 80% 70%, oklch(0.6 0.15 242), transparent 55%)",
}}
>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<FrostTextarea placeholder="Frost — light glass" />
<TintTextarea placeholder="Tint — info-toned glass" />
<SmokeTextarea placeholder="Smoke — dark smoky glass" />
<CrystalTextarea placeholder="Crystal — clear glass" />
<DepthTextarea placeholder="Depth — deepest glass" />
</div>
</div>
);
}