Generator Box Shadow
Generatorul Box Shadow construiește un CSS box-shadow cu glisoare pentru offset X și Y, blur, spread, culoare, opacitate și inset, plus presetări Material Design și Tailwind, și îți oferă codul CSS exact.
Despre acest instrument
Generatorul Box Shadow construiește un CSS box-shadow cu glisoare pentru offset X și Y, blur, spread, culoare, opacitate și inset, plus presetări Material Design și Tailwind, și îți oferă codul CSS exact.
Cum se folosește
- Pornește de la o presetare sau păstrează Custom.
- Ajustează offset-ul X/Y, blur, spread și opacitatea.
- Alege culoarea umbrei și bifează Inset pentru o umbră interioară.
- Apasă Copy CSS pentru a lipi regula box-shadow.
Bine de știut
- Sintaxa box-shadow este: [inset] offset-x offset-y blur-radius spread-radius color.
- O rază de blur mai mare înmoaie marginea; spread face umbra să crească sau să se micșoreze înainte de estompare.
- Umbrele închise cu opacitate scăzută (aproximativ 10–25%) arată mai natural decât negrul solid.
- Mai multe umbre pot fi suprapuse, separându-le prin virgule.
- Cuvântul cheie inset desenează umbra în interiorul marginii elementului.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum adaug o umbră unui div în CSS?
Folosește proprietatea box-shadow, de exemplu box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); acest instrument scrie valoarea pentru tine.
Care este diferența dintre blur și spread?
Blur controlează cât de moale este marginea umbrei. Spread mărește sau micșorează dimensiunea umbrei înainte de aplicarea blur-ului.
Cum fac o umbră interioară?
Adaugă cuvântul cheie inset la începutul valorii sau bifează Inset în instrument.
Pot folosi mai multe umbre box-shadow?
Da. Separă umbrele prin virgule; umbrele suprapuse, precum presetările Material și Tailwind, arată mai realist.