Glassmorphism Generator
Set the backdrop colours, blur, tint and border for a glass panel, see the effect live and copy the CSS.
このコンテンツは英語です。
Glass card
Sample text on a frosted panel.
計算例
Frosted card with a light tint
White tint at 25 per cent opacity, 10px blur, and a 1px light border at 30 per cent
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3);
The blur applies to whatever sits behind the card, which is what makes it look frosted.
Darker tint for contrast
Black tint at 20 per cent opacity, 14px blur, and a 1px light border at 20 per cent
background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.2);
A darker tint can help text stand out, so check the text colour against the tint with the contrast checker.
Glassmorphism Generator について
Glassmorphism is a style where a panel looks like frosted glass, with a see-through tint, a soft blur on whatever sits behind it and a thin light border around its edge. It has become popular for cards, navigation bars and dialogue boxes because it adds depth without heavy shadows or solid blocks of colour. The effect comes from the backdrop-filter property, which blurs the content behind an element. This generator lets you set the two backdrop colours, the blur, the card tint, the opacity and the corner radius, and shows a live preview of the result.
Getting the effect right depends on the background. Blur needs something behind the card to blur, so the best results come over images, gradients or bright shapes. Keep the tint light enough that the text on the card stays easy to read, and keep the blur moderate so the background is still recognisable. The copied CSS includes a prefixed version of the blur for older Safari releases, so the effect works across more browsers without extra changes. A quick test with the colours from your own page is the best way to check that the card looks right.
Glassmorphism Generator の使い方
- Set the two backdrop colours to match the background behind your card.
- Adjust the blur amount so the background is softened but still visible.
- Choose the card colour and set its opacity to control how much of the background shows through.
- Copy the CSS and apply it to the element that should look like glass.
主な使いみち
- Designing a card that sits over a hero image or a gradient
- Creating a navigation bar that stays readable while the page scrolls behind it
- Making a pop-up or dialogue panel that looks light and layered
- Trying out a modern visual style before building it into a project
よくあるご質問
What does backdrop blur do?
Backdrop blur applies a blur to everything behind an element, rather than to the element itself. It is what makes a panel look like frosted glass. The effect is visible only where something sits behind the panel, so a plain background shows little change. Use a background with shapes, colour or an image to see the blur clearly.
Why is my glass card hard to read?
A card that is too transparent or sits over busy colours can make text hard to read. Increase the card opacity, use a lighter or darker card colour, or change the text colour so it contrasts with the blended background. The WCAG 2.2 guidelines suggest a contrast ratio of at least 4.5:1 for normal text, so check the text on the card with a contrast checker.
Do all browsers support backdrop blur?
Most modern browsers support backdrop blur, and the copied CSS includes the prefixed version for older Safari releases. Some older browsers ignore the effect entirely. In that case the card still shows its tint and border, so design the card to remain readable without the blur. Test the page on the browsers your visitors are most likely to use.
What blur and opacity values work best?
A blur between 8px and 16px and a card opacity between 15% and 35% suit most designs. Higher blur values can make the background an indistinct wash, while very high opacity loses the see-through effect that defines glassmorphism. The border works best as a thin line with a low opacity, because a strong border can look like a frame rather than a reflection of light.
Can I use glassmorphism on a light background?
Yes, although the effect is less dramatic on a plain light background. Add a soft gradient or a few coloured shapes behind the card so the blur has something to soften. Dark text on a light glass card usually reads well, and a white tint at a moderate opacity keeps the look bright and clean.