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