Outils CSS et design gratuits en ligne

Générateurs visuels de CSS, couleurs, ombres et dégradés.

9 outils

Générateur de box-shadow CSSConcevez des ombres réalistes en superposant plusieurs calques, comme les meilleurs design systems. Réglez décalage, flou, étendue, couleur et opacité de chaque calque et copiez le résultat en CSS ou en classe Tailwind.

Convertisseur de couleurs (HEX, RGB, HSL, CMJN, OKLCH)Saisissez une couleur dans n’importe quel format — #hex, rgb(), hsl(), hwb(), oklch() ou un nom comme « tomato » — et obtenez instantanément toutes ses équivalences, son contraste WCAG sur blanc et noir et une gamme de teintes et d’ombres.

Générateur de palettes de couleursPartez de votre couleur de marque et obtenez une gamme complète de 50 à 950, perceptuellement uniforme et prête pour votre design system, ainsi que des combinaisons harmonieuses. Votre couleur d’origine est conservée à l’identique sur le palier correspondant.

Générateur de dégradés CSSConcevez des fonds en dégradé en faisant glisser des arrêts de couleur sur une barre, choisissez le type (linéaire, radial ou conique) et copiez un CSS prêt pour la production, avec couleur de repli et version moderne en OKLCH sans zones grises.

Générateur CSS GridRéglez colonnes, lignes et espacements avec des curseurs et voyez le résultat en direct. Copiez le CSS et le HTML prêts à coller dans votre projet.

Générateur de glassmorphism (verre dépoli)Concevez des cartes et panneaux en verre dépoli et voyez le résultat instantanément sur différents fonds. Le CSS généré inclut le préfixe -webkit- dont Safari a encore besoin.

Extracteur de palette de couleursImportez une photo, un logo ou une illustration et découvrez ses couleurs principales. Choisissez le nombre de couleurs, copiez chaque HEX d’un clic ou toute la palette en variables CSS.

Générateur de neumorphisme (Soft UI)Le neumorphisme donne l’impression que les éléments émergent du fond grâce à deux ombres opposées, une claire et une sombre. Réglez chaque paramètre, choisissez d’où vient la lumière et copiez le CSS.

Générateur de vagues et blobs SVGConcevez des séparateurs de section ondulés et des formes organiques uniques. Réglez points, amplitude et couleurs, régénérez jusqu’à ce que ça vous plaise, puis copiez le code SVG ou téléchargez un PNG.