Glassmorphism-Card

Eine Kartenkomponente, die den im modernen Webdesign überaus beliebten „Glassmorphism“-Effekt (Milchglaseffekt) integriert. Durch die Kombination von Hintergrundunschärfe (backdrop-filter), einer halbtransparenten Hintergrundfarbe und einem dezenten Rahmen entsteht eine elegante Benutzeroberfläche mit räumlicher Tiefe.

Glassmorphism

Dies ist eine Demo für Glassmorphism. Der Hintergrund scheint wunderschön durch, was einen beeindruckenden visuellen Effekt erzeugt, bei dem der Inhalt im Raum zu schweben scheint.

Code

Kopieren Sie den folgenden Code und fügen Sie ihn in Ihr Projekt ein.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      Dies ist eine Demo für Glassmorphism. Der Hintergrund scheint wunderschön durch, was einen beeindruckenden visuellen Effekt erzeugt, bei dem der Inhalt im Raum zu schweben scheint.
    </p>
  </div>
</div>

/* 背景（デモ用） */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Glasmorphismus-Kartenkörper */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

Eigenschaften

Elegante Transparenz und Unschärfe: Verwendet backdrop-filter: blur(), um eine milchglasähnliche Textur zu erzeugen.
Dreidimensionaler Effekt: Die Kombination aus einem halbtransparenten Rahmen und einem dezenten Schlagschatten lässt das Element optisch über dem Hintergrund schweben.
Hohe Flexibilität: Fügt sich harmonisch in das Design ein, selbst wenn der Hintergrund aus einem Farbverlauf oder einem Bild besteht.