Badge Webflow Award Winner 2023

Tuto Webflow : Effet Glassmorphism

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

Publié le 
14/4/2022
Modifié le 
23/3/2023
5 min
Exemple d'effet glassmorphism bleu sur l'interface de design webflow

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 !

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !