Carte glassmorphism

Créez une carte en verre dépoli avec aperçu en direct et copiez le code HTML, CSS ou Tailwind.

Propriétés de la carte

Flou d'arrière-plan : 10px

Opacité de l'arrière-plan : 7%

Opacité de la bordure : 30%

Rayon de bordure : 20px

Largeur de bordure : 1px

Opacité de la lueur interne : 5%

Teinte d'arrière-plan

Teinte de bordure

Contenu des éléments de la carte

Carte en verre

Un composant interactif premium avec réfraction subtile et accents de bordure.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Comment ça marche

Réglez le flou, les reflets, les lueurs internes et l'arrière-plan d'une carte en verre dépoli (glassmorphism).
Regardez l'aperçu en direct se mettre à jour pendant vos réglages.
Accordez l'effet à votre design.
Copiez du HTML ou du CSS propre, ou une configuration Tailwind.

À quoi ça sert

Construire une carte en verre dépoli pour une interface moderne.
Obtenir du CSS prêt à copier pour un effet glassmorphism.
Exporter une carte en verre au format Tailwind.

Bon à savoir

L'effet verre repose sur backdrop-filter et sur un fond chargé derrière la carte. Sur une couleur unie, l'effet est discret.
La prise en charge de backdrop-filter varie : testez dans les navigateurs visés et prévoyez une solution de repli.

Questions fréquentes

Que puis-je copier ?

Du HTML propre, du CSS simple ou une configuration Tailwind, selon votre technologie.

Pourquoi le verre paraît-il plat dans ma page ?

Le glassmorphism a besoin d'un contenu visuel derrière lui à flouter. Sur un fond uni, il n'y a rien à dépolir : placez la carte sur une image ou un dégradé.

Quelque chose est-il envoyé sur un serveur ?

Non. Le générateur tourne entièrement dans votre navigateur.

Outils associés

Visionneuse DXF

Palette de couleurs d'image

Convertisseur de couleur

Générateur de box-shadow CSS

Vérificateur de contraste