Glassmorphism Guide
Glassmorphism is a UI design style using frosted-glass effects: semi-transparent layers, backdrop blur, and subtle borders that let background colors glow through. Popularized by Apple and Microsoft, it is now a standard technique in modern interface design.
Adjust the blur radius, white transparency, border width, and corner radius to craft your glass card. The preview shows a realistic frosted panel over a colorful background, and the CSS output includes the -webkit- prefix for Safari compatibility.
Pro Tips
- Glass effects need a colorful background to be visible. On flat white or black backgrounds, glassmorphism loses its depth — always pair with vibrant gradients.
- Keep transparency between 10% and 30%. Higher opacity turns the glass into a solid white card and kills the effect.
- Use glass panels for sidebars, navbars, and modals — not for long paragraphs of body text. Frosted surfaces work best as containers for short labels, icons, and buttons.
Frequently Asked Questions
Q: What is backdrop-filter?
What is backdrop-filter? It applies visual effects (like blur) to everything BEHIND an element. Unlike filter, which affects the element itself, backdrop-filter blurs the background while keeping the glass layer sharp.
Q: Does glassmorphism work in all browsers?
Does glassmorphism work in all browsers? Backdrop-filter is supported in all modern browsers. Safari requires the -webkit-backdrop-filter prefix, which the generated CSS includes automatically.
Q: Is glassmorphism still trendy in 2026?
Is glassmorphism still trendy in 2026? Yes. It has evolved from a trend into an established design language used by Apple, Microsoft, and major fintech apps like Revolut and N26.
Q: What is the best background for glass cards?
What is the best background for glass cards? Vibrant gradients in purple, blue, pink, or teal work best. The background should be colorful enough to show through the frosted layer.
Q: Does backdrop-filter hurt performance?
Does backdrop-filter hurt performance? A few glass elements have negligible impact. Dozens of stacked backdrop-filters can slow scrolling on low-end devices — use them on key surfaces only.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.