CSS Varjo-generaattori
Luo CSS box-shadow visuaalisesti live-esikatselun kanssa. Säädä siirtymä, sumennus, levitys, väri ja peittävyys. Kopioi CSS-koodi. Ilmainen, 100% selaimessa.
Esikatselu
CSS-koodi
Viite
Mikä on CSS box-shadow?
CSS-ominaisuus box-shadow lisää yhden tai useamman varjoefektin elementin kehyksen ympärille.
box-shadow syntaksi
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Vaakasuora etäisyys. Positiivinen = oikealle, negatiivinen = vasemmalle.
Useiden varjokerrosten käyttö
Useiden varjojen yhdistäminen luo realistisia syvyysefektejä.
Suunnitteluvinkkejä varjoille
Käytä rgba()- tai hsla()-värejä — puoliläpinäkyvät varjot näyttävät luonnollisemmilta.
Pidä valonlähde yhtenäisenä — käytä samaa siirtymäsuuntaa koko käyttöliittymässä.
Tietosuoja
Kaikki varjojen luonti suoritetaan 100% selaimessasi. Tietoja ei lähetetä palvelimelle.