Accueil
Tom Utilities

Générateur d'ombres CSS

Utilitaires pour développeurs

Créez des ombres avec des curseurs pour le décalage, le flou, la diffusion et la couleur, puis copiez le CSS.

Comment utiliser

Build a shadow

Move the sliders to adjust the horizontal offset, vertical offset, blur and spread. Choose a color and enable inset for an inner shadow.

  1. Adjust the four sliders.
  2. Pick a shadow color.
  3. Copy the generated box-shadow declaration.

Negative values

Offsets and spread accept negative values, which move the shadow up or left and shrink it.

Questions fréquentes

What is spread?

Spread expands or contracts the shadow before it is blurred. Positive values make the shadow larger.

Why is my shadow translucent?

The generated color includes partial transparency so the shadow blends with the background. Replace the color value if you want it fully opaque.

Outils associés

Générateur de border-radius Prévisualisez et copiez les valeurs CSS border-radius de chaque coin en pixels ou en pourcentage. Générateur de dégradés CSS Concevez des dégradés CSS linéaires ou radiaux avec aperçu en direct et CSS prêt à copier. Formateur CSS Embellit le CSS avec une propriété par ligne et une indentation cohérente. 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.