Ce site utilise des statistiques de première main respectueuses de la vie privée pour savoir quelles pages et quels outils sont utiles. Aucune donnée n'est partagée avec des traceurs ou publicitaires tiers. En savoir plus

Outils · CSS · Créer un effet glassmorphism

Créer un effet glassmorphism

Créez une carte en verre dépoli avec flou d'arrière-plan, transparence et bordure douce, et copiez le CSS.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Comment ça marche

  1. Ajustez le flou, la couleur de teinte, l'opacité de fond, et la saturation.

  2. Affinez l'opacité de la bordure et le rayon des coins pour donner de la profondeur.

  3. Copiez le CSS terminé, y compris la propriété backdrop-filter.

Questions fréquentes

L'effet repose sur backdrop-filter, que certains navigateurs plus anciens ne prennent pas en charge. Là où elle manque, l'aperçu affiche la teinte sans le flou, mais le CSS copié n'est pas affecté et reste correct.

Les deux. backdrop-filter floute tout ce qui se trouve derrière l'élément : une image, un dégradé, ou une autre couleur.

Le CSS généré inclut le préfixe -webkit-backdrop-filter en plus de la propriété standard.

Non. Tout fonctionne dans votre navigateur.

Outils similaires

Créer un dégradé CSS

Créez un dégradé CSS linéaire, radial ou conique, et copiez le code.

 Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.

 Arrondir les coins en CSS

Façonnez chaque coin d'une boîte séparément, ou fondez-les en une forme organique, et copiez le CSS border-radius.

 Générateur de courbe cubic-bezier

Faites glisser une courbe pour créer une valeur d'accélération cubic-bezier(), regardez-la jouer avec une transition CSS en direct, et copiez le code.

 Générateur de clip-path

Créez une forme de découpe CSS clip-path - polygone, cercle, ellipse ou rectangle intérieur - avec un aperçu en direct, et copiez le code.

 Minificateur et formateur CSS

Minifiez ou mettez en forme du CSS, en direct pendant que vous collez, entièrement dans votre navigateur.

 Bac à sable Flexbox

Créez une mise en page CSS flexbox - direction, retour à la ligne, justification, alignement, espacement, et croissance/réduction/base par élément - avec un aperçu en direct, et copiez le code.

 Bac à sable Grid

Créez une mise en page CSS grid - nombre de pistes, espacements, alignement, et placement par élément - avec un aperçu en direct, et copiez le code.

Commentaires

  1. Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.
Votre note (facultatif)

Aucune note sélectionnée