CssHow-ToBeginner · 3 min read

How to Create Glassmorphism in CSS: Simple Guide

To create glassmorphism in CSS, use a semi-transparent background color with rgba(), add backdrop-filter: blur() to blur the content behind, and apply a subtle border and shadow for depth. This combination creates a frosted glass effect that looks modern and stylish.

📐

Syntax

Glassmorphism uses a few key CSS properties:

background-color with transparency (using rgba()) to let background show through.
backdrop-filter: blur() to blur whatever is behind the element.
border with partial transparency to outline the glass.
box-shadow to add subtle depth.

css

.glass {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* for Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

💻

Example

This example shows a centered card with glassmorphism effect over a colorful background. The card uses transparency and blur to create the frosted glass look.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Glassmorphism Example</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
  }
  .glass {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 2rem 3rem;
    color: white;
    max-width: 300px;
    text-align: center;
  }
  h1 {
    margin-top: 0;
  }
</style>
</head>
<body>
  <div class="glass">
    <h1>Glassmorphism</h1>
    <p>This card uses CSS to create a frosted glass effect.</p>
  </div>
</body>
</html>

Output

A centered translucent card with blurred background and white text on a blue gradient background.

⚠️

Common Pitfalls

Common mistakes when creating glassmorphism include:

Not using backdrop-filter or forgetting browser prefixes, so blur doesn't work.
Using opaque backgrounds instead of transparent ones, which hides the blur effect.
Skipping the border or shadow, making the glass effect less visible.
Using too much blur or transparency, which can make text hard to read.

css

/* Wrong: opaque background hides blur */
.wrong {
  background-color: white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* for Safari */
}

/* Right: transparent background shows blur */
.right {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* for Safari */
}

📊

Quick Reference

Tips for effective glassmorphism:

Use rgba() with alpha around 0.1 to 0.3 for background transparency.
Apply backdrop-filter: blur(5px to 20px) for the frosted effect.
Add a subtle border with partial transparency.
Use box-shadow for depth and separation.
Test readability by adjusting blur and transparency.

✅

Key Takeaways

Use transparent backgrounds with rgba() to let the background show through.

Apply backdrop-filter: blur() to create the frosted glass blur effect.

Add a semi-transparent border and subtle shadow for depth.

Test your design for readability and adjust blur and transparency accordingly.

Include -webkit-backdrop-filter for Safari support.