Les outils de développeur que vous utilisez chaque jour, tous au même endroit.

Convertisseurs, formateurs, hash, validateurs et les petits utilitaires que vous rouvrez sans cesse restent réunis au lieu de se perdre entre vos onglets.

GitHub

/ Outils

■

/ Chercheur d'outils

109 outils

/ Générateur de box-shadow

Préréglages

Ombres (2/5)

Ombre 1

Intérieur

Horizontal : 0px

Vertical : 4px

Flou : 6px

Étalement : -1px

Couleur

Opacité : 10%

Ombre 2

Intérieur

Horizontal : 0px

Vertical : 2px

Flou : 4px

Étalement : -2px

Couleur

Opacité : 10%

Arrière-plan de l'aperçu

Aperçu

Code CSS

Valeur arbitraire Tailwind

/ Outil sélectionné

■

Générateur de box-shadow - outil de génération gratuit

Générateur visuel de box-shadow CSS avec prise en charge de plusieurs ombres

■ 01

Qu'est-ce que la propriété CSS box-shadow ?

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs ombres séparées par des virgules. Chaque ombre est décrite par des décalages horizontal et vertical, des rayons de flou et d'étalement, une couleur et…

■ 02

Comment ça marche ?

Les ombres portées sont définies par plusieurs valeurs : décalage horizontal (positif déplace vers la droite), décalage vertical (positif déplace vers le bas), rayon de flou (plus grand signifie plus flou), rayon d'étalement (positif agrandit, négatif réduit) et c…

■ 03

Exemples de cas

Couvre Ombre subtile, Élévation moyenne et Ombre intérieure pour comparer rapidement les entrées et sorties courantes.

/ Outils associés

/ Code

■

Code source de l'outil sélectionné, affiché ici à côté de la version en direct sur la droite.

/ Code source

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;