CSS Box Shadow -generaattori

Box-shadow-määrittelyssä on kuusi liikkuvaa osaa — X- ja Y-siirtymä, sumennus, leviäminen, väri ja valinnainen inset-avainsana — ja ainoa tapa saada ne oikein on nähdä ne. Tämä generaattori asettaa jokaisen osan liukusäätimelle ja piirtää tuloksen esikatselukortille, kun vedät, joten alareunan CSS-rivi on aina täsmälleen se, mitä katsot.

Todelliset varjot ovat harvoin yksittäinen kerros. Kerroslistan avulla voit pinota enintään neljä varjoa yhteen määrittelyyn: tiukka tumma viiva reunojen määrittelyyn ja leveä pehmeä pesu kohotusta varten, tai vaalea-tumma -pari, joka määrittelee neumorfismin. Valitse kerros muokataksesi sitä, poista ne, joita et tarvitse, ja yhdistetty box-shadow-arvo päivittyy livenä.

Varjot toimivat hyvin eri tavalla tummissa käyttöliittymissä, joissa musta varjo lähes mustalla sivulla yksinkertaisesti katoaa. Esikatselun taustan vaihtonappi vaihtaa taustan vaalean ja tumman välillä, jotta voit tarkistaa molemmat teemat ennen käyttöönottoa. Esiasetussivut kattavat variantit, joita ihmiset todella etsivät: pehmeän kohotusvarjon, upotetun syvennyksen, kaksikerroksisen neumorfismireseptin ja hienovaraisen korttivarjon.

Kuten kaikki tämän sivuston työkalut, generaattori on ilmainen ja toimii kokonaan selaimessasi: ei tiedostojen siirtoa, ei tiliä, ja se toimii offline-tilassa, kun sivu on ladattu.