Glassmorphism & Effets Verre
Glassmorphism, neumorphism, liquid glass et superellipse.
Mis à jour le
Qu'est-ce que le glassmorphism, et comment le faire en CSS ?
Le glassmorphism est un style de surfaces translucides, en verre dépoli, posées sur un fond coloré. En CSS, il combine un fond semi-transparent, backdrop-filter: blur() pour flouter ce qui se trouve derrière, une fine bordure claire et une ombre douce. Le neumorphism et les formes en superellipse (squircle), aussi présents sur cette page, en sont proches.
Comment choisir, performances et accessibilité
- Il fonctionne très bien pour les cartes, barres de navigation, fenêtres et grilles tarifaires posées sur des images ou des dégradés, comme Glass Card, Frosted Panel ou Glass Navigation, et mal sur un fond blanc uni.
- Vérifiez le contraste du texte sur la zone la plus claire derrière le verre, limitez le nombre de calques floutés sur mobile et prévoyez un fond plein là où
backdrop-filtern'est pas disponible. - Glass Card, Frosted Panel, Neu Button, Squircle Cards, Beveled Control Panel et Liquid Glass sont gratuits avec leur code ; les autres sont inclus dans Premium.
Glass Card
Survol pour l'effet
Glass Card
Carte glassmorphism classique avec backdrop-filter, fond semi-transparent et bordure subtile. Des orbes colorées flottent en arrière-plan.
Voir le code source
<div class="demo-preview">
<div class="glass-card-scene">
<div class="glass-card-orb glass-card-orb--1"></div>
<div class="glass-card-orb glass-card-orb--2"></div>
<div class="glass-card-orb glass-card-orb--3"></div>
<div class="glass-card-element">
<h3>Glass Card</h3>
<p>Survol pour l'effet</p>
</div>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(224, 229, 236);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.glass-card-scene {
width: 320px;
height: 220px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.glass-card-orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
animation: glassOrbFloat 6s ease-in-out infinite;
}
.glass-card-orb--1 {
width: 120px;
height: 120px;
background: #8b5cf6;
top: 10px;
left: 20px;
animation-delay: 0s;
}
.glass-card-orb--2 {
width: 100px;
height: 100px;
background: #06b6d4;
bottom: 10px;
right: 20px;
animation-delay: -2s;
}
.glass-card-orb--3 {
width: 80px;
height: 80px;
background: #ec4899;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -4s;
}
.glass-card-element {
position: relative;
z-index: 1;
width: 260px;
height: 160px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card-element:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
}
.glass-card-element::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
border-radius: inherit;
pointer-events: none;
}
.glass-card-element h3 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.glass-card-element p {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
@keyframes glassOrbFloat {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(15px, -10px) scale(1.1);
}
66% {
transform: translate(-10px, 15px) scale(0.9);
}
}/* CSS pur — aucun JavaScript requis */Frosted Panel
Les blobs bougent derrière le verre givré
Frosted Panel
Panneau givré avec des blobs de gradient animés en arrière-plan, montrant l'effet de flou en temps réel.
Voir le code source
<div class="demo-preview">
<div class="frosted-panel-scene">
<div class="frosted-blob frosted-blob--1"></div>
<div class="frosted-blob frosted-blob--2"></div>
<div class="frosted-blob frosted-blob--3"></div>
<div class="frosted-panel-element">
<h3>Frosted Panel</h3>
<p>Les blobs bougent derrière le verre givré</p>
<div class="frosted-dots">
<span class="frosted-dot"></span>
<span class="frosted-dot"></span>
<span class="frosted-dot"></span>
</div>
</div>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(224, 229, 236);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.frosted-panel-scene {
width: 340px;
height: 230px;
position: relative;
overflow: hidden;
border-radius: 16px;
background: #080812;
}
.frosted-blob {
position: absolute;
border-radius: 50%;
filter: blur(30px);
}
.frosted-blob--1 {
width: 160px;
height: 160px;
background: linear-gradient(135deg, #a855f7, #6366f1);
top: -30px;
left: -20px;
animation: blobDrift1 8s ease-in-out infinite;
}
.frosted-blob--2 {
width: 140px;
height: 140px;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
bottom: -40px;
right: -20px;
animation: blobDrift2 10s ease-in-out infinite;
}
.frosted-blob--3 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #ec4899, #f43f5e);
top: 50%;
left: 60%;
animation: blobDrift3 7s ease-in-out infinite;
}
.frosted-panel-element {
position: absolute;
inset: 30px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 1;
}
.frosted-panel-element h3 {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.frosted-panel-element p {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
text-align: center;
padding: 0 20px;
}
.frosted-panel-element .frosted-dots {
display: flex;
gap: 6px;
margin-top: 4px;
}
.frosted-panel-element .frosted-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.frosted-panel-element .frosted-dot:nth-child(1) {
background: #a855f7;
}
.frosted-panel-element .frosted-dot:nth-child(2) {
background: #06b6d4;
}
.frosted-panel-element .frosted-dot:nth-child(3) {
background: #ec4899;
}
@keyframes blobDrift1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(40px, 20px) rotate(90deg);
}
50% {
transform: translate(20px, 60px) rotate(180deg);
}
75% {
transform: translate(-10px, 30px) rotate(270deg);
}
}
@keyframes blobDrift2 {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-30px, -20px) rotate(-90deg);
}
50% {
transform: translate(-50px, -40px) rotate(-180deg);
}
75% {
transform: translate(-20px, -10px) rotate(-270deg);
}
}
@keyframes blobDrift3 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-40px, -30px) scale(1.3);
}
}/* CSS pur — aucun JavaScript requis */Glass Morphing Button
Bouton en verre qui se transforme et s'agrandit au survol avec un effet de backdrop blur.
Glass Pricing Card
Carte tarifaire en verre avec bordure dégradée, prix, liste de fonctionnalités et bouton d'action.
Frosted Modal
Fenêtre modale avec effet verre givré. L'arrière-plan contient des éléments colorés visibles à travers le flou.
Glass Notification
Notifications toast en verre avec icône, texte et bouton de fermeture. Trois variantes : succès, info et avertissement.
Layered Glass
Plusieurs panneaux de verre superposés à différents niveaux de flou, créant un effet de profondeur.
Glass Input
Champs de formulaire avec effet verre, flou d'arrière-plan et lueur violette au focus.
Aurora Glass
Carte en verre avec des couleurs d'aurore boréale animées derrière la surface givrée.
Neu Button
Boutons neumorphiques avec double ombre (claire et foncée). L'état pressé utilise des ombres internes pour simuler l'enfoncement.
Voir le code source
<div class="demo-preview">
<div class="neu-btn-scene">
<button class="neu-btn">
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Continuer
</button>
<button class="neu-btn neu-btn--pressed">
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
Validé
</button>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(224, 229, 236);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.neu-btn-scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.neu-btn {
width: 180px;
height: 54px;
border-radius: 16px;
background: #e0e5ec;
box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;
border: none;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.neu-btn:hover {
box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff;
color: #8b5cf6;
}
.neu-btn:active,
.neu-btn--pressed {
box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff;
color: #8b5cf6;
}
.neu-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}/* CSS pur — aucun JavaScript requis */Neu Card
Carte en relief avec avatar en creux (inset shadow), barre de progression colorée et ombres douces au survol.
Neu Toggle
Interrupteurs neumorphiques avec piste en creux et bouton en relief. Animation bounce au changement d'état.
Neu Input
Champs de saisie en creux avec ombre interne. Lueur violette subtile au focus et icône de recherche intégrée.
Neu Slider
Curseurs avec piste en creux et poignée en relief. La barre de remplissage utilise un gradient violet.
Neu Clock
Horloge analogique neumorphique avec cadran en creux, aiguilles animées en temps réel et repères des heures.
Neu Music Player
Lecteur musical complet avec pochette rotative, barre de progression et boutons de contrôle en relief.
Neu Calculator
Calculatrice complète avec écran en creux, touches en relief et touche égal avec gradient violet.
Claymorphism Card
Variante colorée du neumorphisme avec effet argile : bords arrondis, ombres internes et fond pastel.
Neu Dashboard
Mini tableau de bord avec statistiques en relief, badge en creux et graphique à barres dans un cadre neumorphique.
Liquid Glass Card
Carte translucide avec réfraction et highlights spéculaires via SVG feTurbulence et feSpecularLighting.
Glass Morphing Button
Bouton qui transite entre un état solide et un état verre liquide au survol avec displacement SVG.
Liquid Lens Magnifier
Lentille de verre survolable qui réfracte et amplifie le contenu sous-jacent avec distorsion de bord.
Glass Ripple Touch
Cliquez sur la surface en verre pour créer des ondulations concentriques qui se propagent.
Iridescent Glass Panel
Panneau de verre avec reflets chromatiques arc-en-ciel qui réagissent à l'angle de la souris.
Glass Depth Stack
Panneaux de verre empiles a différentes profondeurs avec blur parallaxe entre les couches.
Liquid Glass Toggle
Toggle switch avec un bouton-bulle en verre liquide qui s'écrase et réfracte la lumière.
Rain on Glass
Gouttes d'eau animées glissant sur une surface en verre givrée avec traînée de réfraction.
Glass Shatter & Reform
Cliquez pour briser le panneau de verre en fragments, puis reassemblez-le magnetiquement.
Bubble Glass Grid
Grille de bulles en verre qui fusionnent et se séparent au survol avec des transitions fluides.
Glass Caustics
Motifs caustiques lumineux projetés sous une couche de verre, simulant la réfraction de la lumière.