1<div class="el-glass-frost">2 <div class="el-glass-frost__glow"></div>3 <div class="el-glass-frost__body">4 <span class="el-glass-frost__badge">Pro</span>5 <h3 class="el-glass-frost__title">Frosted Panel</h3>6 <p class="el-glass-frost__text">Klare Sicht durch mattes Glas mit sanftem Lichtschimmer.</p>7 <button class="el-glass-frost__btn">Entdecken</button>8 </div>9</div>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Eine moderne Premium-Card mit Glassmorphism, Glow-Rand, animiertem Licht-Scan, Status-Badge, Metrik und CTA. Perfekt für SaaS-Dashboards, Feature-Cards, Pricing-Highlights oder Component-Libraries.
Eine freistehende Premium-Karte mit einem flüssigen 3D-Neigungseffekt (Tilt). Beim Hovern verfolgt ein sanfter, holografischer Glanz den Mauszeiger. Die inneren Elemente (Icon, Text, Badge) haben eine eigene Z-Achsen-Übersetzung (Parallax), wodurch sie optisch aus der Karte heraustreten. Die JavaScript-Logik nutzt Event-Delegation und CSS-Variablen, sodass beliebig viele Karten dynamisch auf der Seite platziert werden können.