Tuto Webflow : Effet Glassmorphism

Tutoriel
April 14, 2022
3 min
Exemple d'effet glassmorphism bleu sur l'interface de design webflow
Key points

Dans notre tutoriel Webflow d’aujourd’hui, nous allons voir comment ajouter un effet glassmorphism dans son projet Webflow.

1 - Qu’est-ce que le glassmorphism ?

Le glassmorphism est une tendance d’interface utilisateur (UI) qui donne un effet de transparence à des éléments. Cependant, ce n’est pas qu’une simple transparence, en fait, ce style de design propose un effet de “verre dépoli”. Grâce à la profondeur et au système de hiérarchie, on peut mettre en avant une impression de superposition de plusieurs couches comme s’il y avait des morceaux de verre par-dessus votre appareil.

Exemple effet glassmorphism site web

2 - Comment ajouter un effet glassmorphism sur son site Webflow ?

Pour donner un effet de verre à vos éléments sur Webflow, il existe une méthode très simple. En quelques étapes, vous pourrez avoir cette tendance design sur votre site.

2.1 - Préparez votre bloc dans Webflow

Premièrement, vous allez devoir vous connecter à votre compte Webflow et entrer dans le designer de votre projet.

Ensuite, vous allez vous rendre dans la section, dans laquelle vous souhaitez ajouter un effet glassmorphism. Une fois à l’intérieur, vous allez pouvoir ajouter un “div block”. Il faut bien penser à le nommer avec une classe. Vous pouvez le positionner où vous souhaitez, lui donner vos propres dimensions, mais il ne faut pas lui donner de background.

Ajout d'un div block dans webflow pour glassmorphism

2.2 - Allez sur le site Glassmorphism.com

Glassmorphism.com propose un outil no-code très pratique pour tester vos effets glassmorphism en direct et copier le code CSS de l’effet. Vous pouvez jouer sur la transparence, le blur et la couleur. Une fois que vous avez l’effet qui vous convient le mieux, vous pouvez copier le code css du glassorphism.

Personnalisation effet glassmorphism sur glassmorphism.com

2.3 - Ajouter le code dans un embed sur Webflow

Maintenant que vous avez copié le code css, vous pouvez retourner dans votre projet Webflow. Dans le précédent “div block” que vous avez créé, vous allez pouvoir insérer l’élément “embed”.

Ajout élément embed dans webflow pour effet glassmorphism

Dans l’éditeur de code, vous allez ajouter le code suivant et le personnaliser en fonction de votre paramétrage :

Par exemple, dans notre cas, cela donne :

Ajout du code personnalisé glassmorphism sur Webflow

Cliquez ensuite sur “Save & close”. Votre effet c’est automatiquement mis dans votre bloc.

Exemple effet glassmorphism sur Webflow

Vous pouvez ensuite ajouter des éléments par dessus ou derrière votre effet glassmorphism.

Exemple effet glassmorphism sur Webflow avec éléments

Une autre méthode consiste à jouer sur l’opacité du background et le blur de votre bloc, mais le rendu ne sera pas le même.

Voilà, vous savez maintenant comment ajouter l’effet glassmorphism à vos blocs sur Webflow. Pour en apprendre plus sur Webflow, vous pouvez consulter notre blog ou notre chaîne YouTube !

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Make vs n8n vs Zapier
Documentation
NoCode

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025
photo noir et blanc d’un expert digital marketing pris de dos entrain de présenter un projet de communication sur son ordinateur à un client
News
SEO

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025
2025 SEO Stats
Documentation
SEO

Tendances SEO 2025 : 20 statistiques pour améliorer son référencement

Tendances SEO 2025 : 20 statistiques pour améliorer son référencement

Transformez votre site web en un moteur de croissance.

Nous contacter