Générez des effets CSS magnifiques visuellement et rapidement.
Laboratoire interactif de CSS moderne : glassmorphisme, ombres en calques, dégradés interpolés en OKLab, arrondis organiques et filtres, avec le code généré toujours sous les yeux.
Espace CSS
Modifiez les contrôles à gauche pour voir les changements en temps réel.
BoutonMolette pour zoomer sous le curseur, glissez pour déplacer, maintenez B pour comparer avec l’élément sans style.
Le PNG est redessiné sur un canvas à partir des mêmes valeurs — ce n’est pas une capture d’écran — il reste donc net à toute taille.
.glass-card {
background: #ffffff24;
backdrop-filter: blur(16px) saturate(140%) brightness(105%);
-webkit-backdrop-filter: blur(16px) saturate(140%) brightness(105%);
border: 1px solid #ffffff38;
border-radius: 24px;
box-shadow: 0 8px 32px 0 #00000036, inset 0 1px 0 0 #ffffff38;
}Coller un CSS existant+
Collez une box-shadow, un dégradé, un border-radius ou un filter — voire une règle entière — et les contrôles s’y ajustent.
Comment ça marche
Choisissez un effet
Verre, ombre en calques, dégradé, arrondi ou filtre : cinq générateurs pour une seule prévisualisation.
Réglez-le
Faites glisser un curseur ou tapez la valeur exacte. Chaque modification est à un « annuler » près.
Vérifiez-le
Zoomez sous le curseur, déplacez-vous et maintenez pour comparer avec l’élément sans style.
Emportez-le
Copiez le CSS, du Tailwind, du SCSS ou des variables, partagez un lien, ou envoyez le PNG vers un autre outil.
Ombres en calques
Empilez autant de calques qu'une vraie élévation l'exige, coupez-en un, et dupliquez celui qui marche déjà.
Espaces colorimétriques modernes
Interpolez les dégradés en OKLab ou OKLCH pour supprimer le banding sRGB, et affichez toute valeur en HEX, RGB, HSL ou oklch().
Recollez votre CSS
Déposez une règle que vous avez déjà et les curseurs s'y placent, au lieu de la reconstruire à l'œil.
Coins organiques
Border-radius à huit points avec une grille de préréglages vivante, plus un champ manuel pour la forme exacte voulue.
Un historique qui ne pèse rien
Soixante annulations qui stockent les nombres, pas les pixels : rien ne dévore la mémoire.
Directement vers l'outil suivant
Rendez la surface en PNG et envoyez-la vers CompressSnap, CropSnap ou MemeBolt sans passer par le dossier Téléchargements.
Rien ne quitte le navigateur
Aucun envoi, aucun compte, aucun aller-retour serveur. Votre image ne quitte jamais l'onglet.
Pensé pour le clavier
Les touches 1 à 5 changent de générateur, Ctrl+Z annule, Alt affine un curseur dix fois plus.
Générez des effets CSS magnifiques visuellement et rapidement.
Concevoir des styles modernes ne devrait pas revenir à deviner des nombres dans un éditeur de texte. Cinq générateurs partagent une prévisualisation en direct : réglez-les au curseur ou à la valeur exacte, comparez avec l'élément sans style, annulez ce que vous voulez, et repartez avec le code, un lien ou un PNG.
Traitement 100% côté client
Tous les styles sont générés localement dans votre navigateur. Vos données ne sont jamais envoyées sur un serveur.
Le compagnon CSS ultime pour les développeurs web et designers UI/UX.
Idéal pour concevoir des cartes, des boutons, des arrière-plans et des panneaux interactifs.
Tout est traité localement, garantissant une confidentialité totale.
Questions fréquentes
QEst-ce gratuit ?+
Oui, CSS Designer est 100% gratuit.
QPuis-je l'utiliser avec Tailwind ?+
Oui, nous fournissons les classes Tailwind correspondantes.
QQu'est-ce que le Glassmorphism ?+
Le Glassmorphism est une tendance UI qui imite le verre dépoli. Il utilise le flou backdrop-filter et des fonds semi-transparents pour superposer élégamment des éléments sur des arrière-plans colorés.
QFonctionne-t-il sur mobile ?+
Absolument. La mise en page est optimisée pour smartphones, tablettes et ordinateurs afin de coder en déplacement.
QPuis-je coller une règle CSS que j’ai déjà ?+
Oui. Ouvrez « Coller un CSS existant » sous le panneau de code et déposez une box-shadow, un dégradé, un border-radius ou un filter ; une règle entière fonctionne aussi. Les contrôles se placent sur ces valeurs et vous continuez à éditer de là.
QQu’est-ce que change l’interpolation en OKLab ou OKLCH ?+
L'interpolation sRGB fait passer le milieu du dégradé par une zone grise et terne. OKLab et OKLCH gardent la clarté perçue stable : un mélange violet-rose reste vif d'un bout à l'autre. Le CSS généré utilise la syntaxe standard « in oklab ».
QL’export PNG est-il une capture d’écran ?+
Non. L'image est redessinée sur un canvas à partir des mêmes nombres que la prévisualisation : elle est nette en 1600×900 comme en 1080×1920, et vous pouvez l'envoyer directement vers un autre outil oLoveTools sans la télécharger.
QEst-ce que quelque chose est envoyé quand j’ajoute mon image ?+
Non. L'image est décodée dans l'onglet et sert uniquement de fond à la prévisualisation. Même l'extraction de palette tourne sur votre machine, et seulement quand vous appuyez sur le bouton.