Outils de design et CSS

Construisez dégradés, ombres et effets avec du CSS prêt à copier.

100% côté client Gratuit pour toujours Sans inscription

Les effets CSS sont bien plus faciles à concevoir à l’œil qu’à écrire de mémoire. Personne ne retient la syntaxe exacte d’un dégradé conique à plusieurs arrêts, d’une ombre en couches qui se lit comme une profondeur douce, ou d’une courbe cubic-bezier qui semble naturelle plutôt que mécanique. Ces générateurs offrent des contrôles visuels et produisent le CSS correspondant en direct : vous ajustez jusqu’à ce que le rendu soit juste, puis vous copiez la règle dans votre feuille de style.

Outils de cette catégorie

Générateur de Lorem Ipsum Générez le célèbre faux texte Lorem Ipsum par paragraphes, phrases ou mots — brut ou enveloppé dans des paragraphes HTML, prêt à copier. Générateur de dégradé CSS Composez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur déplaçables et un aperçu en direct — puis copiez un CSS propre et prêt à l’emploi. Générateur de favicon Téléversez une image et téléchargez un pack complet : favicon.ico, PNG de 16 à 512 px, icône Apple touch, webmanifest et les balises HTML à coller. Aperçu Open Graph Voyez votre lien exactement comme les réseaux sociaux l'afficheront. Convertisseur de Formats de Couleur HEX ⇄ RGB ⇄ HSL ⇄ OKLCH avec aperçu en direct. Sélecteur de Couleurs en Ligne Sélection visuelle avec codes HEX / RGB / HSL instantanés. Vérificateur de Contraste (WCAG) Testez toute paire de couleurs contre les seuils WCAG AA et AAA. Générateur de Palettes Palettes harmoniques depuis toute couleur — avec variables CSS. Générateur de Box Shadow L'ombre CSS parfaite avec des curseurs et un aperçu en direct. Playground CSS Flexbox Ajustez les propriétés flexbox visuellement et copiez le CSS. Générateur de CSS Grid Concevez vos grilles visuellement — obtenez du CSS propre. Optimiseur SVG Réduisez vos SVG en toute sécurité — rendu visuel identique. Calculateur de Ratio d'Aspect Résolvez largeur/hauteur depuis un ratio cible instantanément. Convertisseur PX vers REM et EM Calculateur d'unités CSS avec table de conversion incluse. Générateur visuel de CSS Border Radius Des coins simples aux formes blob organiques, par glissement. Générateur d'animations CSS en direct Des keyframes professionnels sans écrire de code à la main. Convertisseur CSS vers Tailwind Des propriétés CSS aux utility classes en un collage. Générateur d'Images de Code Captures de code élégantes en PNG. Simulateur de Daltonisme Voyez votre design comme les daltoniens. Calculateur de Spécificité CSS Quel sélecteur gagne ? Score (a,b,c). Éditeur et Visualiseur de Tracés SVG Voir, comprendre et transformer les paths SVG. Générateur d'Images Placeholder Images factices sur mesure en PNG ou SVG. Générateur de Configuration Tailwind Générez un tailwind.config.js avec vos couleurs de marque, polices, mode sombre et plugins.

À propos de ces outils

Dégradés, ombres et profondeur en couches

Une profondeur convaincante ne vient presque jamais d’une seule ombre. Les interfaces réelles empilent une ombre proche, sombre et serrée pour le contact avec une autre plus large, douce et claire pour la diffusion ambiante — et CSS autorise plusieurs ombres séparées par des virgules exactement pour cela. Les dégradés fonctionnent pareil : ajouter des arrêts de couleur intermédiaires est ce qui supprime le gris boueux apparaissant quand le navigateur interpole entre deux teintes éloignées.

Formats de couleur et contraste

HEX est compact, RGB est explicite, HSL permet de construire une palette en déplaçant un seul nombre, et le moderne OKLCH maintient la luminosité perçue stable entre les teintes, si bien qu’un ensemble de couleurs ressemble vraiment à un ensemble. Convertir entre eux est une routine ; vérifier le contraste ne l’est pas, car un texte sous le ratio WCAG est illisible pour beaucoup de gens et sera signalé par tout audit d’accessibilité.

Un mouvement qui ne fait pas bon marché

Une transition linéaire paraît mécanique parce que rien de physique ne se déplace à vitesse constante. Les courbes d’accélération corrigent cela, et l’écart entre une bonne transition et une transition agaçante tient souvent à la durée plus qu’à la courbe : 150 à 250 ms pour de petits changements d’état, un peu plus pour des mouvements amples. Voir la courbe s’animer à côté du code rend ce jugement rapide.