Generator de CSS box-shadow
Construiți o valoare box-shadow din offset, estompare, propagare și culoare, cu straturi multiple și predefinite.
Generator de CSS box-shadow
Reglați offset-ul orizontal și vertical, raza de estompare, raza de propagare și culoarea, iar acest instrument asamblează declarația box-shadow corespunzătoare în timp ce progresați. A fost construit pentru cazul zilnic — un card, un buton, o modală care trebuie să se ridice din pagină — precum și pentru umbre stratificate din mai multe umbre stivuite, tehnica din spatele adâncimii moi și realiste folosite în majoritatea sistemelor de design moderne.
Meniul derulant de predefinite oferă elevație subtilă, medie și puternică, fiecare cu propriul număr de straturi, offset și estompare deja reglate; alegeți personalizat pentru a controla fiecare valoare singur. Opțiunea de straturi controlează câte umbre se stivuiesc: fiecare strat adăugat mărește offset-ul și estomparea după indexul acestuia și scade opacitatea acestuia, transformând o umbră plată și unică într-una moale și convingătoare. Inset inversează umbra înăuntru pentru elemente apăsate, opacitatea controlează cum se citește culoarea, și comutatorul de unitate produce px sau rem. Activați varianta de mod întunecat pentru o a doua declarație mai puternică avansată într-un bloc @media (prefers-color-scheme: dark) — o umbră are nevoie de mai multă opacitate pentru a rămâne vizibilă pe un fundal întunecat. Alegeți dacă rezultatul iese ca o singură linie, o proprietate personalizată --box-shadow, sau o clasă .box-shadow, și adăugați o linie filter: drop-shadow corespunzătoare pentru elemente pe care box-shadow nu le poate atinge, cum ar fi o pictogramă SVG sau un PNG transparent.
Fiecare valoare este fixată la un interval rezonabil, și o culoare nerecunoscută se întoarce la negru în loc de CSS rupt, deci rezultatul se lipește întotdeauna curat în foi de stil.
Totul rulează în browserul dvs. pe măsură ce reglați controalele — nici o culoare sau CSS generat nu este niciodată trimis nicăieri. Copiați rezultatul, descărcați-l ca fișier .txt sau trimiteți-l într-un alt instrument pentru a continua lucrul la el.