Glassmorphism
Dial in a frosted-glass surface against a real backdrop, then take the CSS, the Tailwind classes or a finished HTML block.
Live preview
CSS, Tailwind & HTML
Real backdrop
Gradients
Photos
Your own image
Preview
Output
Backdrop blur needs something behind it
backdrop-filter samples whatever is painted underneath the element. Over a flat,
single-colour background the effect is invisible, which is usually why it "does not work".
Contrast
Text on glass sits over unpredictable content. Keep body copy at a high opacity and check it
against both the lightest and the darkest part of your background before shipping.