Generatore di ombre CSS
Anteprima di una box shadow CSS e copia del codice.
Generatore di ombre CSS
Your result appears here
Adjust the values to see your result automatically.
Come usare Generatore di ombre CSS
Color CSS shadow generator builds a box-shadow declaration from horizontal and vertical offsets, blur, spread, a shadow color and an opacity from 0 to 1, with an optional inset shadow. It shows a live preview card and outputs a ready-to-copy CSS line that writes the color as rgba.
- Regola i valori; un risultato iniziale viene calcolato dai valori predefiniti.
- Modifica le impostazioni di base o apri la modalità avanzata per ottimizzare il risultato.
- Esamina e copia o scarica il risultato. Metti in pausa i risultati in tempo reale per eseguire manualmente. Origini o singole impostazioni superiori a 20.000 caratteri richiedono un'esecuzione esplicita.
Cosa supporta questo strumento
Anteprima di una box shadow CSS e copia del codice.
- Spostamento orizzontale (px)
- Set this value for your task.
- Spostamento verticale (px)
- Set this value for your task.
- Sfocatura (px)
- Range: 0 to 200
- Diffusione (px)
- Set this value for your task.
- Colore ombra
- Set this value for your task.
- Opacità
- Range: 0 to 1
- Inset
- Set this value for your task.
Limiti ed elaborazione
Usa numeri finiti, date valide e gli intervalli mostrati da ciascun controllo. I valori non validi producono un errore senza risultato scaricabile.
Origine di esempio
Hello ToolCabana
Domande frequenti
How do I make an inset box shadow in CSS?
Turn on the Inset option. The generated declaration then starts with the inset keyword, and the preview card shows the shadow inside its edges instead of outside.
How do I set the transparency of a CSS shadow?
Use the Opacity slider, from 0 to 1 in steps of 0.01. The chosen color is converted to rgba with that alpha value, so the default of 0.15 gives a soft shadow.
What is the maximum blur for the shadow generator?
Blur accepts whole pixel values from 0 to 200. The horizontal and vertical offsets and spread can be negative, which moves or shrinks the shadow.
Dove viene elaborato il mio input?
Questa operazione elabora i dati di origine nel tuo browser. Copia e download sono azioni esplicite; l'input di origine non viene salvato in un account né in una cronologia.
Quali sono i limiti di input?
Usa numeri finiti, date valide e gli intervalli mostrati da ciascun controllo. I valori non validi producono un errore senza risultato scaricabile.