Generatore CSS box-shadow
Generatore CSS box-shadow con controlli per offset, sfocatura, diffusione, colore e inset e anteprima dal vivo dell'ombra. Copia il CSS pronto all'uso, gratis nel browser.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Ombra esterna
Incorpora
Ultimo aggiornamento: 2026 · Strumento online gratuito
Cos'è Generatore CSS box-shadow?
Generatore CSS box-shadow con controlli per offset, sfocatura, diffusione, colore e inset e anteprima dal vivo dell'ombra. Copia il CSS pronto all'uso, gratis nel browser.
Come usare
- 1Seleziona preset— Inizia rapidamente con un pulsante preset.
- 2Regola cursori— Regola l'ombra con i cursori offset X/Y, sfocatura e diffusione.
- 3Anteprima— Controlla il risultato in tempo reale nell'anteprima sopra.
- 4Copia CSS— Usa il pulsante di copia per ottenere il CSS box-shadow.
Strumenti correlati
Generatore di gradiente CSSGeneratore visuale di gradienti CSS lineari, radiali e conici: aggiungi color stop, regola l'angolo e copia il CSS. Perfetto per sfondi e pulsanti, gratis nel browser.
Generatore CSS border-radiusGeneratore CSS border-radius con otto maniglie d'angolo indipendenti, cursori e anteprima dal vivo della forma arrotondata. Copia il CSS pronto all'uso, gratis nel browser.
Generatore CSS FlexboxPlayground CSS Flexbox con editor visuale per justify-content, align-items, flex-direction e wrap e anteprima del layout dal vivo. Genera CSS Flexbox pronto da copiare, gratis nel browser.
Convertitore di coloriConvertitore di colori tra codici HEX, RGB, HSL e OKLCH, con il rapporto di contrasto WCAG tra due colori. Verifica l'accessibilità mentre scegli la palette, gratis nel browser.
Domande frequenti
Sì, usa il pulsante 'Aggiungi ombra' per sovrapporre più ombre.
Sì, attiva la casella Inset su ogni ombra per creare un'ombra interna.
Cinque preset sono forniti: Subtle, Medium, Large, Inset e Double.
Sì, puoi inserire direttamente rgba(0,0,0,0.15) nel campo colore.
No. Tutti i calcoli avvengono nel browser.