Générateur CSS Glassmorphism

Réglez le flou, la transparence, la teinte, la bordure, le rayon des coins et la saturation, observez la carte en verre dépoli se mettre à jour en temps réel sur un fond coloré, puis copiez le CSS. Rien n'est téléchargé.

Verre dépoli Aperçu en direct

Fond

Flou12px

Transparence15%

Saturation180%

Couleur de teinte

Bordure

Visibilité de la bordure40%

Rayon des coins20px

Profondeur de l'ombre30

Tout fonctionne dans votre navigateur. Sans téléchargement, sans inscription.

Comment ça marche

STEP 1

Déplacez les curseurs

Définissez le flou, la transparence, la couleur de teinte, la bordure, le rayon des coins et la saturation. La carte de verre se met à jour en temps réel lors du glissement.

STEP 2

Choisissez un fond

Changez le dégradé derrière la carte pour évaluer l'effet de verre dépoli sur des fonds clairs, sombres et vifs.

STEP 3

Copiez le CSS

Copiez le CSS prêt à coller avec backdrop-filter, ou téléchargez un fichier .css. Tout est généré sur votre appareil.