Créateur de Cartes Glass

Cartes glassmorphism avec flou, dégradés et aperçu live.

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

Ajustez le flou, les reflets, les lueurs internes et l'arrière-plan d'une carte en glassmorphisme.
Regardez l'aperçu en direct se mettre à jour pendant le réglage.
Accordez l'effet à votre design.
Copiez du HTML, du CSS ou une configuration Tailwind propres.

À quoi ça sert

Construire une carte en verre dépoli pour une interface moderne.
Obtenir un CSS de production pour un effet de glassmorphisme.
Exporter un composant en verre prêt pour Tailwind.

Bon à savoir

Le rendu en verre s'appuie sur backdrop-filter et sur un arrière-plan chargé derrière lui, sur une couleur unie, l'effet est subtil.
La prise en charge de backdrop-filter varie ; testez dans vos navigateurs cibles et prévoyez un repli.

Questions fréquentes

Quelle sortie puis-je copier ?

Du HTML propre, du CSS simple ou une configuration Tailwind, selon ce qui correspond à votre stack.

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

Le glassmorphisme a besoin de contenu visuel derrière lui pour flouter. Sur un arrière-plan uni, il n'y a rien à dépolir, alors placez-le sur une image ou un dégradé.

Y a-t-il quelque chose de téléversé ?

Non. Le générateur s'exécute entièrement dans votre navigateur.

Outils associés

Visionneuse DXF

Palette de Couleurs

Convertisseur de Couleur

Générateur de Box Shadow CSS

Vérificateur de Contraste