Générateur de dégradés CSS

Utilitaires pour développeurs

Concevez des dégradés CSS linéaires ou radiaux avec aperçu en direct et CSS prêt à copier.

Comment utiliser

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

Questions fréquentes

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

Outils associés

Générateur de palettes de couleurs Générez des palettes de teintes claires, foncées, analogues, complémentaires et triadiques à partir de n'importe quelle couleur. Générateur d'ombres CSS Créez des ombres avec des curseurs pour le décalage, le flou, la diffusion et la couleur, puis copiez le CSS. Convertisseur de couleurs Convertit les couleurs entre HEX, RGB et HSL avec un aperçu en direct. Générateur d'UUID / GUID Génère des UUID de version 4 aléatoires et les copie un par un ou en masse. Générateur de hachage Calcule les empreintes MD5, SHA-1, SHA-256 et SHA-512 de n'importe quel texte. Convertisseur d'horodatage Convertit entre horodatages Unix, ISO 8601 et dates locales lisibles.