Outils de design web gratuits
Créez les éléments visuels d'un site en voyant le résultat en direct : dégradés, ombres, formes, animations, palettes et favicons. Chaque outil donne un code CSS propre à copier, et tout se passe dans votre navigateur.
| Outil | Famille | Traitement |
|---|---|---|
| Générateur de dégradé CSSDégradés CSS linéaires, radiaux et coniques, code prêt à copier. | Design | Dans votre navigateur |
| Générateur de glassmorphisme CSSEffet verre dépoli en CSS, avec aperçu sur votre fond. | Design | Dans votre navigateur |
| Générateur de clip-path CSSDécouper une image en polygone, cercle ou rectangle, au doigt. | Design | Dans votre navigateur |
| Générateur Flexbox et CSS GridComprendre et régler flexbox et CSS Grid en direct. | Design | Dans votre navigateur |
| Générateur d'ombre CSS (box-shadow)Ombres CSS en couches, modèles prêts, code CSS et Tailwind. | Design | Dans votre navigateur |
| Générateur de border-radiusCoins arrondis, pilules et blobs en CSS. | Design | Dans votre navigateur |
| Générateur de filtres CSSFiltres CSS en direct sur votre image, avec export. | Design | Dans votre navigateur |
| Générateur d'animation CSS15 animations CSS réglables, code @keyframes prêt. | Design | Dans votre navigateur |
| Générateur de courbe cubic-bezierCourbes de vitesse CSS dessinées à la main et comparées. | Design | Dans votre navigateur |
| Générateur de palette de couleursPalettes harmonieuses et nuanciers 50–950, prêts à coder. | Design | Dans votre navigateur |
| Extraire les couleurs d'une imageCouleurs dominantes et pipette, codes prêts à copier. | Design | Dans votre navigateur |
| Vérificateur de contraste des couleurs (WCAG)Contraste WCAG AA et AAA, avec correction automatique. | Design | Dans votre navigateur |
| Générateur de faviconTous les favicons d'un site en un clic, avec le code HTML. | Design | Dans votre navigateur |
| Générateur de vagues SVGVagues SVG pour séparer les sections, SVG ou CSS. | Design | Dans votre navigateur |
| Générateur de motifs CSSFonds à motifs en CSS pur, sans image. | Design | Dans votre navigateur |
| Générateur d'échelle typographiqueÉchelles de tailles de texte et typo fluide avec clamp(). | Design | Dans votre navigateur |
| Convertisseur d'unités CSSConversions px, rem, em, %, vw, pt, cm… instantanées. | Design | Dans votre navigateur |
| Calculateur de ratio (format d'image)Ratio d'image, redimensionnement proportionnel et aspect-ratio CSS. | Design | Dans votre navigateur |
À propos de ces outils
Les outils de design produisent le code CSS des effets les plus utilisés sur le web : dégradés, ombres en couches, effet verre dépoli, découpes clip-path, coins arrondis et blobs, filtres d'image, motifs de fond, vagues SVG, animations et courbes de vitesse. Chaque réglage se voit immédiatement dans un aperçu rendu par votre navigateur avec exactement le code affiché.
D'autres outils aident à choisir et vérifier : palettes harmonieuses et nuanciers de 50 à 950, couleurs extraites d'une image, contraste WCAG avec correction automatique, échelle typographique fluide, conversion d'unités et calcul de ratio. Le générateur de favicon crée toutes les icônes d'un site, du favicon.ico aux icônes Android.
Le code produit est court et lisible : seules les propriétés utiles sont écrites, avec des versions Tailwind et SCSS quand c'est pertinent. Vos réglages sont gardés dans votre navigateur pour la prochaine visite, sans compte ni envoi de données.
Quel outil choisir ?
Je veux un fond ou un effet de surface
« Dégradé CSS » pour les fonds colorés, « Motifs CSS » pour les pois et rayures, « Glassmorphisme » pour le verre dépoli, « Ombre CSS » pour le relief.
Je veux une forme particulière
« Border-radius » pour les coins arrondis et les blobs, « Clip-path » pour les polygones et découpes, « Vague SVG » pour les séparateurs de sections.
Je veux animer
« Animation CSS » fournit 15 effets prêts ; « Courbe de Bézier » règle finement la vitesse de vos transitions.
Je choisis des couleurs
« Palette de couleurs » propose des harmonies et des nuanciers, « Couleurs d'une image » extrait celles d'une photo ou d'un logo, et « Contraste WCAG » vérifie la lisibilité.
Je règle la mise en page et les tailles
« Flexbox et Grid » pour placer les éléments, « Échelle typographique » pour les tailles de texte, « Unités CSS » et « Calcul de ratio » pour les conversions.
Questions fréquentes
Le code fonctionne-t-il sur tous les navigateurs ?
Oui : les outils utilisent des propriétés CSS prises en charge par tous les navigateurs récents, et ajoutent les préfixes nécessaires (-webkit-) quand Safari les demande.
Faut-il connaître le CSS ?
Non pour régler et voir le résultat. Pour l'utiliser, il suffit de coller le code dans la feuille de style de votre site ou dans un éditeur comme WordPress, Webflow ou Wix (CSS personnalisé).
Mes réglages sont-ils sauvegardés ?
Oui, dans votre navigateur uniquement : vous retrouvez vos derniers réglages à la prochaine visite. Le bouton « Réglages par défaut » les efface.
Les outils sont-ils gratuits pour un usage commercial ?
Oui. Le code produit vous appartient, sans attribution ni limite d'utilisation.