Generatore di Box Shadow

Trascini i cursori per definire un'ombra box-shadow, sovrapponga i livelli per dare profondità e copi il codice CSS istantaneamente.

Livelli di ombra
Livello 1
CSS
Regoli i cursori per dare forma all'ombra.

Ogni ombra viene renderizzata nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.

FAQ

Cosa controllano esattamente offset, blur e spread?

L'offset sposta l'ombra a sinistra/destra e in alto/basso, la sfocatura (blur) ne ammorbidisce i bordi e l'estensione (spread) la ingrandisce o rimpicciolisce prima di sfocarla. Un valore di spread negativo restringe l'ombra, utile per un effetto più compatto e aderente.

Cosa fa l'opzione inset?

Un'ombra normale cade all'esterno dell'elemento, come la luce dietro una scheda in rilievo. L'opzione Inset la proietta invece all'interno, facendo apparire l'elemento incassato: ideale per input scavati o pulsanti premuti.

Perché sovrapporre più livelli di ombra?

Un'ombra singola, oltre una certa dimensione, rischia di apparire piatta. Un'elevazione realistica combina solitamente un'ombra stretta e scura con una più morbida e ampia: aggiunga un secondo livello e li regoli in modo indipendente per ottenere questo effetto.

Generatore CSS Cubic BezierTrascini le due maniglie per modellare una curva di easing, osservi il movimento in tempo reale e copi il valore cubic-bezier() risultante.Generatore di GradientiCrei un gradiente lineare, radiale o conico, aggiunga punti di colore, imposti la direzione e copi il codice CSS con un solo clic.Generatore di Border RadiusArrotondi ogni angolo con i cursori, crei forme organiche con la modalità ellittica e copi il codice CSS all'istante.Generatore di FlexboxConfiguri un contenitore flex e i relativi elementi con controlli visivi, osservi la risposta del layout in tempo reale e copi il codice CSS con un clic.Generatore di CSS GridDefinisca colonne e righe, trascini il mouse sulle celle per posizionare gli elementi e copi il codice CSS e HTML corrispondente con un solo clic.Calcolatore CSS clamp()Inserisca una dimensione per schermi piccoli e grandi e ottenga un valore clamp() fluido che si adatta perfettamente: ideale per font, padding, margini o gap.Convertitore di ColoreConverta i colori tra HEX, RGB, HSL, HSV, CMYK e LAB: modifichi un campo e gli altri si aggiorneranno di conseguenza.Formattatore e minimizzatore CSSRiorganizza i rientri del CSS disordinato per leggerlo facilmente o minimizzalo per la pubblicazione, con una modalità sicura che non altera l'ordine delle regole.Verifica ContrastoInserisca un colore per il testo e uno per lo sfondo per calcolare il rapporto di contrasto WCAG e verificare il superamento dei livelli AA e AAA.