Migliore gratis Generatore di ombre CSS Box
Visualmente costruisci CSS box-shadow con anteprima dal vivo, inset e un secondo livello
100% esenzione
Nessun segno
Nessuna filigrana
✨
Go Pro per i migliori modelli AI - immagine, video e chat - più maggiori upload, priorità nella coda e nessuna attesa.
Aggiorna a Pro
Amore Best.Free? Condividilo
Come funziona
- Sposta i cursori. Imposta offset, sfocatura, diffusione, colore e opacità; attiva l'impostazione se vuoi un'ombra interna.
- Guarda l'anteprima. La live box aggiorna mentre si trascina; aggiungere un secondo livello nelle opzioni avanzate per la profondità.
- Copia il CSS. Premi Copia CSS e incolla la regola dell'ombra di scatola direttamente nel foglio di stile.
Informazioni su questo strumento
Progetta un'ombra senza indovinare i valori dei pixel. Trascinare i cursori offset-X, offset-Y, sfocatura e diffusione, scegliere un colore ombra e comporre nella sua opacità, e guardare un aggiornamento in tempo reale di anteprima ® casella di testo in tempo reale quindi copiare l'esatto CSS ombra-box. Rifletti il tasto di selezione per un'ombra interna. Le opzioni avanzate impilano un secondo strato di ombra, in modo da poter costruire le ombre morbide e multistrato utilizzate su schede e pulsanti moderni. Tutto funziona nel browser.
Per cosa la gente lo usa
- Aggiungere un'ombra morbida a carte e modalità
- Crea un'ombra interna (inserto) per ingressi e pozzi
- Impila due strati per un'ombra diffusa realistica
- Spostamento e sfocatura per abbinare un mockup di design
Domande frequenti
Offset-X/Y sposta l'ombra in orizzontale e verticale, la sfocatura ammorbidisce il bordo e la diffusione cresce o restringe l'intera ombra prima che la sfocatura venga applicata. L'anteprima live mostra ogni cambiamento istantaneamente.
Inset disegna l'ombra all'interno dell'elemento invece che dietro di esso, dando un look premuto utile per gli ingressi e i commutatori.
Scegli un colore, poi usa il cursore di opacità; lo strumento emette un valore rgba() in modo che l'ombra si mischii naturalmente.
Sì. Apri Opzioni avanzate per abilitare un secondo livello di ombra con il proprio offset, sfocatura, colore e inset.
No. Il generatore funziona interamente nel browser; i cursori semplicemente calcolare una stringa CSS localmente.
Completamente gratuito, nessun account e nessun limite
Sì. E funziona nel browser, quindi CSS Box Shadow Generator funziona su telefoni e tablet così come desktop...
Di solito solo pochi secondi per un tipico file CSS Box Generator inizia a funzionare nel momento in cui gli dai il tuo input.
L'uso casuale è illimitato, sotto un generoso tappo di uso equo che lo mantiene veloce per tutti.
Tutti i browser moderni Chrome, Safari, Firefox e Edge. CSS Box Shadow Generator non ha bisogno di nulla installato oltre il browser che già utilizza.