Generator CSS sjene kutije
Izgradi CSS box-shadow vrijednost od pomaka, zamućenja, razmazivanja i boje, s više slojeva i predložaka.
Generator CSS sjene kutije
Podesi vodoravni i okomiti pomak, radijus zamućenja, radijus razmazivanja i boju, pa će ovaj alat sastaviti odgovarajuću box-shadow deklaraciju dok radiš. Izgrađen je za svakodnevnu upotrebu — kartice, gumbe, modalne okvire koji trebaju biti istaknutiji — kao i za slojevite sjene napravljene od nekoliko sjene naslaganih zajedno, tehnike koja stoji iza meke, realistične dubine koja se koristi u većini modernih dizajn sustava.
Padajući gumb Predložak nudi suptilnu, srednju i jaku elevaciju, svaka s vlastitim brojem slojeva, pomakom i zamućenjem već podešenim; odaberi Prilagođeno da sam upravljaš svakom vrijednosti. Opcija Slojevi kontrolira koliko sjene se nakupljaju: svaki dodatni sloj povećava pomak i zamućenje prema njegovom indeksu i smanjuje njegovu neprozirnost, pretvarajući jednu ravnu sjenu u meku, uvjerljivu. Ugnjena preusmjerava sjenu unутarnje za pritisnute elemente, neprozirnost kontrolira kako se boja čita, a sklopka jedinica ispisuje px ili rem. Uključi varijantu za tamni način za drugu, jaču deklaraciju umotanu u @media (prefers-color-scheme: dark) blok — sjena trebaju veću neprozirnost da ostane vidljiva na tamnoj pozadini. Odaberi dolazi li rezultat kao jedan redak, --box-shadow prilagođena svojstva, ili .box-shadow razred, i dodaj podudarnu liniju filter: drop-shadow za elemente koje box-shadow ne može dosegnuti, kao što su SVG ikona ili PNG sa transparentnošću.
Svaka vrijednost je ograničena na smislen raspon, a neprepoznata boja se vraća na crnu umjesto slomljenog CSS-a, pa izlaz uvijek ljepljivo pristaje u stilsku sekvencu.
Sve se pokreće u tvom pregledniku dok prilagodjavaš kontrole — nikakva boja ili generirani CSS nikada nije poslana nigdje. Kopiraj rezultat, preuzmi ga kao .txt datoteku, ili ga pošalji drugom alatu da nastavia s radom na njemu.