Gli strumenti per sviluppatori che usi ogni giorno, tutti in un unico posto.

Convertitori, formattatori, hash, validatori e le piccole utility che continui a riaprire restano insieme invece di perdersi tra le schede.

GitHub

/ Strumenti

■

/ Cerca strumento

109 strumenti

/ Generatore di box-shadow

Preset

Ombre (2/5)

Ombra 1

Interna

Orizzontale: 0px

Verticale: 4px

Sfocatura: 6px

Estensione: -1px

Colore

Opacità: 10%

Ombra 2

Interna

Orizzontale: 0px

Verticale: 2px

Sfocatura: 4px

Estensione: -2px

Colore

Opacità: 10%

Sfondo dell'anteprima

Anteprima

Codice CSS

Valore arbitrario Tailwind

/ Strumento selezionato

■

Generatore di box-shadow - strumento generatore gratuito

Generatore visuale di box-shadow CSS con supporto per ombre multiple

■ 01

Cos'è la proprietà CSS box-shadow?

La proprietà CSS box-shadow aggiunge effetti d'ombra attorno alla cornice di un elemento. Puoi impostare più ombre separate da virgole. Ogni ombra è descritta da uno spostamento orizzontale e verticale, dal raggio di sfocatura e di espansione, dal colore e…

■ 02

Come funziona?

Le ombre sono definite da diversi valori: spostamento orizzontale (positivo sposta a destra), spostamento verticale (positivo sposta in basso), raggio di sfocatura (più grande significa più sfocatura), raggio di espansione (positivo espande, negativo restringe) e c…

■ 03

Casi di esempio

Copre ombra sottile, elevazione media e ombra interna, così puoi confrontare rapidamente input e output comuni.

/ Strumenti correlati

/ Codice

■

Codice sorgente dello strumento selezionato, mostrato qui accanto alla versione live sulla destra.

/ Codice sorgente

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;