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.
Page de l’effet →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;
background: #080812;
border-radius: 20px;
overflow: hidden;
}
.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: calc(50% - 40px);
left: calc(50% - 40px);
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.
Page de l’effet →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.
Page de l’effet →Glass Pricing Card
Carte tarifaire en verre avec bordure dégradée, prix, liste de fonctionnalités et bouton d'action.
Page de l’effet →Frosted Modal
Fenêtre modale avec effet verre givré. L'arrière-plan contient des éléments colorés visibles à travers le flou.
Page de l’effet →Glass Notification
Notifications toast en verre avec icône, texte et bouton de fermeture. Trois variantes : succès, info et avertissement.
Page de l’effet →Layered Glass
Plusieurs panneaux de verre superposés à différents niveaux de flou, créant un effet de profondeur.
Page de l’effet →Glass Input
Champs de formulaire avec effet verre, flou d'arrière-plan et lueur violette au focus.
Page de l’effet →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.
Page de l’effet →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;
background: #e0e5ec;
padding: 32px;
border-radius: 24px;
}
.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.
Page de l’effet →Neu Toggle
Interrupteurs neumorphiques avec piste en creux et bouton en relief. Animation bounce au changement d'état.
Page de l’effet →Neu Input
Champs de saisie en creux avec ombre interne. Lueur violette subtile au focus et icône de recherche intégrée.
Page de l’effet →Neu Slider
Curseurs avec piste en creux et poignée en relief. La barre de remplissage utilise un gradient violet.
Page de l’effet →Neu Clock
Horloge analogique neumorphique avec cadran en creux, aiguilles animées en temps réel et repères des heures.
Page de l’effet →Neu Music Player
Lecteur musical complet avec pochette rotative, barre de progression et boutons de contrôle en relief.
Page de l’effet →Neu Calculator
Calculatrice complète avec écran en creux, touches en relief et touche égal avec gradient violet.
Page de l’effet →Claymorphism Card
Variante colorée du neumorphisme avec effet argile : bords arrondis, ombres internes et fond pastel.
Page de l’effet →Neu Dashboard
Mini tableau de bord avec statistiques en relief, badge en creux et graphique à barres dans un cadre neumorphique.
Page de l’effet →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
Loupe en verre qui suit le pointeur et grossit deux fois le contenu dessous, avec un léger éclaircissement.
Page de l’effet →Glass Ripple Touch
Touchez ou cliquez la surface en verre : des ondes concentriques se propagent, une par doigt.
Page de l’effet →Iridescent Glass Panel
Panneau de verre avec reflets chromatiques arc-en-ciel qui réagissent à l'angle de la souris.
Page de l’effet →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.
Page de l’effet →Rain on Glass
Gouttes d'eau animées qui glissent sur une vitre givrée, comme une pluie derrière la fenêtre.
Page de l’effet →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 gonflent au survol et entraînent leurs voisines, avec des transitions fluides.
Page de l’effet →Glass Caustics
Motifs caustiques lumineux projetés sous une couche de verre, simulant la réfraction de la lumière.