About this snippet

Create a trendy glassmorphism effect for UI cards using CSS backdrop-filter. Gives a frosted glass look to elements, often used over vibrant backgrounds.

Size
950 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
701
<div class="glass-container">
  <div class="glass-card">
    <h3>Glass Card</h3>
    <p>This card has a frosted glass effect. Make sure to view it over a colorful background!</p>
  </div>
</div>
body {
  background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Arial', sans-serif;
}
.glass-container {
  /* Not strictly necessary for the card, but good for demo */
}
.glass-card {
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px); /* The magic! */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  color: #fff;
  width: 300px;
  text-align: center;
}
.glass-card h3 {
  margin-top: 0;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save