Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de glassmorphism CSS

CSS Glassmorphism Generator

Dosez teinte, opacité, flou et saturation d'un panneau en verre dépoli sur fond chargé, et copiez le CSS : rgba, backdrop-filter préfixé, bordure et ombre.

Parcours de la tâche / de l'entrée au résultat

Choisissez la teinte du verre

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de glassmorphism CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment construire un panneau glassmorphism

  1. 01

    Choisissez la teinte du verre

    Choisissez une Couleur de teinte du verre. L'aperçu fait flotter le panneau au-dessus de deux orbes colorés, pour que le matériau soit jugé sur un fond chargé comme il le sera sur un vrai écran.

  2. 02

    Réglez l'opacité et le flou

    L'Opacité de la surface va de 0.05 à 0.8 — plus bas signifie plus transparent — et le Flou d'arrière-plan de 0 à 40 px adoucit ce qui se trouve derrière le panneau.

  3. 03

    Ajustez saturation, bordure et rayon

    La Saturation (50–200 %) enrichit ou atténue l'arrière-plan, l'Opacité de bordure (0–0.8) trace le contour dans la couleur de teinte, et le Rayon de coin (0–48 px) arrondit le panneau.

  4. 04

    Équilibrez le matériau

    Les contrôles de surface se compensent les uns les autres : une opacité faible demande plus de flou pour se lire comme du verre, et une Saturation au-dessus de 100 % empêche un arrière-plan chargé de se délaver derrière une teinte pâle. Le matériau par défaut — teinte blanche à 0.22 d'opacité, flou de 18 px, saturation de 140 % — est un juste milieu éprouvé.

  5. 05

    Copiez le CSS du panneau

    Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-glass-panel.css. La règle .glass-panel combine un fond rgba, un backdrop-filter avec son jumeau -webkit-, une bordure teintée de 1 px et une ombre douce.

  6. 06

    Prévoyez le repli

    Sans backdrop-filter, le fond rgba, la bordure et l'ombre restent visibles. Mettre le flou à zéro n'est qu'un essai approximatif du rendu de secours, car la saturation peut encore agir. Testez le CSS dans les navigateurs visés et augmentez l'opacité de surface si le texte manque de contraste.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de glassmorphism CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de glassmorphism CSS fait vraiment

La barre de contrôle flottante d'un lecteur de musique, une carte de notification au-dessus d'une carte, un panneau de connexion suspendu devant un mur de photos — le verre dépoli vend de la profondeur sans masquer la page. L'effet dépend entièrement de ce qui se trouve derrière, c'est pourquoi cet aperçu rend des formes colorées sur lesquelles le flou travaille, et toute l'exploration se fait localement, donc la palette d'une interface non publiée ne quitte jamais l'appareil. Une fois le matériau équilibré, la règle exportée emporte chaque décision avec elle.

Questions fréquentes

Quel CSS l'export produit-il ?
Une seule règle .glass-panel : un fond rgba issu de votre teinte et de votre opacité, backdrop-filter: blur() saturate() sous ses formes standard et -webkit-, une bordure de 1 px dans la teinte à votre opacité de bordure, votre rayon de coin et une ombre portée douce fixe.
Le glassmorphism fonctionne-t-il dans tous les navigateurs ?
La prise en charge et le rendu de backdrop-filter varient selon le navigateur et sa version. L'export comprend les déclarations standard et -webkit-, sans détection à l'exécution. Sans filtre, le fond translucide, la bordure et l'ombre restent ; vérifiez le contraste du texte sur le vrai fond.
Pourquoi l'aperçu a-t-il besoin de ces orbes colorés ?
backdrop-filter traite ce qui se trouve derrière l'élément, donc du verre sur un fond vide ne montre rien. Les orbes donnent au flou et à la saturation une vraie matière à traiter — la même raison pour laquelle les effets de verre ont besoin d'arrière-plans chargés en production.
Qu'est-ce qui est fixe dans la règle exportée ?
Trois choses : la largeur de bordure est toujours de 1 px, la couleur de bordure est toujours votre teinte à l'Opacité de bordure choisie, et l'ombre portée est un dégradé doux fixe. Tout le reste — fond, flou, saturation, rayon — suit directement vos contrôles.
Quelle opacité donner au verre ?
Restez dans la moitié basse de la plage pour les panneaux flottant au-dessus du contenu — la valeur par défaut de 0.22 garde les arrière-plans lisibles à travers le matériau. Ne montez plus haut que lorsque le panneau porte du texte qui doit survivre à un arrière-plan chargé, et vérifiez le contraste à vos vraies tailles de police.
Mes réglages sont-ils téléversés ?
Non. Le panneau est calculé et prévisualisé entièrement dans cet onglet sans compte, et rien n'est stocké, journalisé ou envoyé. Cliquez sur Réinitialiser pour restaurer le matériau par défaut.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer