Generatore di ombre per riquadri
Generare proprietà CSS box-shadow
Livelli di ombra
Ombra 1
Ombre preimpostate
Consigli sulle ombre
I valori positivi di spostamento muovono le ombre in basso e a destra, quelli negativi in alto e a sinistra.
Il raggio di sfocatura determina la morbidezza dell'ombra; valori più alti creano ombre più diffuse.
Il raggio di espansione aumenta o riduce le dimensioni dell'ombra.
Le ombre interne creano ombreggiature all'interno per dare effetti di profondità.
È possibile sovrapporre più ombre per ottenere effetti di illuminazione complessi.
Valori di opacità più bassi creano ombre più tenui e realistiche.
Anteprima in tempo reale
Scala dell'anteprima: 100%
Dichiarazione CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Classe CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (approssimativo)
shadowQuesto è un suggerimento di stile. Spostamenti, colori, ombre interne e livelli multipli personalizzati richiedono il CSS generato.
Modifichi un livello o provi una preimpostazione. L'anteprima si aggiorna durante il lavoro.
Informazioni su Generatore di ombre per riquadri
Il nostro generatore di CSS box shadow gratuito Le permette di creare ombre dall'aspetto professionale con il pieno controllo visivo. Regoli offset, raggio di sfocatura, raggio di diffusione, colore e opacità con cursori intuitivi e veda il risultato aggiornarsi in tempo reale. Sovrapponga più ombre per ottenere effetti di profondità complessi che mettono in risalto gli elementi della Sua interfaccia.
Le ombre sono essenziali per stabilire gerarchia visiva e profondità nelle interfacce web moderne. Un box-shadow ben curato può far sembrare le card sospese sopra la pagina, rendere i pulsanti interattivi e far risaltare gli elementi di navigazione rispetto allo sfondo. Questo strumento elimina i tentativi ed errori nello scrivere a mano i valori di box-shadow.
Il generatore supporta sia ombre esterne sia ombre inset, più livelli di ombra e include 6 modelli predefiniti per gli stili di ombra più comuni. L'output è fornito come codice CSS con un pulsante di copia con un clic, insieme a suggerimenti approssimativi di classi di utilità Tailwind CSS. Tutta l'elaborazione avviene nel Suo browser, senza inviare dati ad alcun server.
Funzioni principali
- Più livelli di ombra che possono essere aggiunti, rimossi e configurati singolarmente
- Cursori precisi per offset X, offset Y, raggio di sfocatura e raggio di diffusione
- Selettore colore con input esadecimale e opacità regolabile per ogni livello di ombra
- Interruttore inset per creare profondità interna ed effetti in rilievo
- 6 modelli di ombra predefiniti: Sottile, Medio, Grande, Extra grande, Interno e Multiplo
- Generatore di ombre casuali per scoprire combinazioni di ombre creative
- Anteprima dal vivo in tempo reale con colore dell'elemento personalizzabile
- Copia negli appunti con un clic con output CSS pulito
- Output in formati alternativi, tra cui classe CSS e utility Tailwind CSS approssimativa
- Supporto completo della modalità scura per modificare comodamente in qualsiasi condizione di luce
Come usare il Generatore di ombre per riquadri
- Aggiunga livelli di ombra: parta dall'ombra predefinita o clicchi su Aggiungi per creare ulteriori livelli di ombra per effetti complessi.
- Regoli le proprietà dell'ombra: usi i cursori per impostare offset X/Y, raggio di sfocatura, raggio di diffusione, colore e opacità di ogni livello di ombra.
- Attivi inset: selezioni la casella Inset su qualsiasi livello di ombra per creare un effetto di ombra interna invece che esterna.
- Veda l'anteprima del risultato: osservi l'elemento di anteprima dal vivo per vedere esattamente l'aspetto dell'ombra. Cambi il colore dell'elemento di anteprima se necessario.
- Provi i modelli predefiniti: clicchi su uno qualsiasi dei 6 modelli predefiniti per applicare rapidamente gli stili di ombra più comuni come punto di partenza.
- Copi il CSS: clicchi sul pulsante Copia per copiare negli appunti la dichiarazione CSS box-shadow completa.
Casi d'uso
- Elevazione delle card: aggiunga profondità ai componenti card in modo che sembrino sospesi sopra lo sfondo della pagina.
- Stati hover dei pulsanti: crei transizioni di ombra per pulsanti che rispondono visivamente all'interazione dell'utente.
- Stile di modali e finestre di dialogo: applichi ombre ampie e morbide a modali e finestre di dialogo per separarli chiaramente dallo sfondo.
- Menu a discesa di navigazione: dia uno stile a menu a discesa e popover con ombre che trasmettono stratificazione e profondità.
- Effetti di focus sugli input: usi ombre colorate come indicatori di focus per i campi dei moduli e gli elementi interattivi.
- Effetti inset: crei aspetti premuti o in rilievo per pulsanti a levetta, stati attivi ed elementi decorativi.
- Design neumorfico: combini più ombre chiare e scure per ottenere la popolare estetica soft UI.
- Cornici per immagini: aggiunga ombre sottili a immagini e contenitori multimediali per un aspetto da galleria curato.
Domande frequenti
Questo strumento è gratuito?
Sì, il Generatore di ombre per riquadri è completamente gratuito, senza limiti al numero di ombre che può creare. Non sono richiesti registrazione né pagamento.
I miei dati sono al sicuro?
Tutta la generazione e l'anteprima delle ombre avviene interamente nel Suo browser. Nessun dato viene inviato a server esterni, quindi le Sue configurazioni e l'output CSS restano completamente privati.
Qual è la differenza tra raggio di sfocatura e raggio di diffusione?
Il raggio di sfocatura controlla quanto l'ombra appare morbida o diffusa: valori più alti creano una dissolvenza più graduale. Il raggio di diffusione espande (valori positivi) o riduce (valori negativi) la dimensione dell'ombra rispetto all'elemento.
Posso usare più ombre su un solo elemento?
Sì, CSS supporta più box-shadow separati da virgole. Questo strumento Le permette di aggiungere più livelli di ombra e li combina automaticamente in un'unica dichiarazione box-shadow.
Che cos'è un'ombra inset?
Un'ombra inset viene disegnata all'interno dell'elemento anziché all'esterno, creando un aspetto incavato o premuto. È usata comunemente per i campi di input, gli stati attivi dei pulsanti e i design neumorfici.
box-shadow è supportato in tutti i browser?
Sì, la proprietà box-shadow è pienamente supportata in tutti i browser moderni, tra cui Chrome, Firefox, Safari, Edge e Opera. Non sono necessari prefissi del produttore.
Consigli e buone pratiche
- Mantenga le ombre sottili: un'opacità bassa (5-15%) e una sfocatura moderata creano ombre realistiche e professionali che non sovrastano il design.
- Usi una diffusione negativa: un piccolo raggio di diffusione negativo fa apparire le ombre più strette e concentrate sotto l'elemento.
- Sovrapponga più ombre: combini un'ombra stretta e scura con una più ampia e chiara per una profondità naturale simile all'illuminazione reale.
- Rispetti la sorgente di luce: mantenga coerenti le direzioni di offset in tutto il design per simulare un'unica sorgente di luce coerente.
- Consideri le prestazioni: valori di sfocatura elevati su molti elementi possono incidere sulle prestazioni di rendering, soprattutto sui dispositivi mobili.
- Usi le ombre per la gerarchia: un'elevazione maggiore (offset e sfocatura più grandi) dovrebbe indicare gli elementi più vicini all'utente nella pila visiva.