CodeKitHubMikä tämä työkalu on?
box-shadow on CSS-ominaisuus, joka piirtää varjon elementin taakse (tai sisään). Käsin kirjoitettuna se ottaa jopa viisi arvoa järjestyksessä — vaakasiirtymä, pystysiirtymä, sumennussäde, levityssäde ja väri — sekä valinnaisen inset-avainsanan, ja tämän kaiken sekoittaminen tai liian hienovaraiseksi/raskaaksi tekeminen ensiyrittämällä on helppoa.
Tämä työkalu muuttaa sen suoraksi manipuloinniksi: vedä liukusäädintä, katso varjon muuttuvan live-esikatselulaatikossa, ja kopioi tarkka CSS, kun se näyttää oikealta. Värinvalitsin ja läpinäkyvyysliukusäädin luovat automaattisesti kunnollisen rgba()-arvon, koska läpinäkyvät varjot näyttävät yleensä paremmilta kuin täysin läpinäkymättömät.
Miksi käyttää sitä?
- Live-esikatselu päivittyy välittömästi minkä tahansa säätimen muuttuessa — näe tarkka varjo ennen kuin sitoudut koodiin.
- Täysi hallinta siirtymä-x:stä, siirtymä-y:stä, sumennuksesta, levityksestä, väristä ja läpinäkyvyydestä yhdessä paikassa.
- Yhdellä napsautuksella inset-lisäys painetun/upotetun ulkonäön saamiseksi kelluvan pudotusvarjon sijaan.
- Tulostaa valmiin liitettävän CSS:n, jossa väri on jo muunnettu rgba()-muotoon valitsemallasi läpinäkyvyydellä.
- Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata minnekään.
- Ilmainen, ei rekisteröitymistä, toimii mobiilissa.
Käyttöohje
- Aseta siirtymä-x ja siirtymä-y varjon sijoittamiseksi — positiiviset arvot työntävät sitä oikealle/alas, negatiiviset vasemmalle/ylös.
- Kasvata sumennussädettä pehmentääksesi varjon reunaa; kasvata levitystä tehdäksesi varjosta elementtiä itseään suuremman.
- Valitse väri ja säädä läpinäkyvyyttä — realistisimmat varjot käyttävät 15–40 % läpinäkyvyyttä täysin mustan sijaan.
- Valitse 'inset', jos haluat varjon näkyvän elementin reunuksen sisällä sen takana olemisen sijaan.
- Kopioi luotu CSS ja liitä se tyylitiedostoosi.
Esimerkki
Syöte
Siirtymä: 0px, 10px · Sumennus: 20px · Levitys: 0px · Väri: musta 35 % läpinäkyvyydelläTuloste
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Pehmeä varjo suoraan elementin alla ilman vaakasiirtymää — yksi yleisimmistä kortti-/painikevarjotyyleistä.
Yksi varjo vai kerroksittaiset varjot
Tämä työkalu rakentaa yhden varjokerroksen, mikä kattaa valtaosan todellisista käyttötapauksista — painikkeet, kortit, modaalit ja pudotusvalikot käyttävät lähes aina yhtä varjoa. CSS tukee myös pilkulla erotettuja useita varjoja samalle elementille monimutkaisempia syvyystehosteita varten (esim. tiukka, tumma varjo kerrostettuna pehmeän, laajan varjon alle), mutta se on hienosäätöä, jonka voit lisätä käsin: luo yksi varjo tässä, kopioi rivi, säädä toisen setin arvoja ja yhdistä ne pilkulla.
Yleisiä box-shadow-kuvioita
- Hienovarainen korttinosto: pieni siirtymä (0–4px), kohtalainen sumennus (8–16px), 10–20 % läpinäkyvyys mustalle.
- Kohotettu modaali/pudotusvalikko: suurempi siirtymä (4–10px) ja sumennus (20–30px), 20–35 % läpinäkyvyys vahvemman leijunnan tunteen saamiseksi.
- Painettu/sisäänpäin suuntautuva painike: valitse inset, käytä pientä 'negatiivisen tuntuista' siirtymää ja kohtalaista sumennusta, jotta varjo tuntuu lommolta eikä nostolta.
- Värillinen hehku: valitse mustan sijaan brändiväri, nosta läpinäkyvyys 40–60 %:iin ja kasvata levitystä hieman pehmeän hehkuefektin saamiseksi painikkeiden ympärille.
- Terävä/kova varjo: aseta sumennus ja levitys nollaan kiinteän, siirretyn siluetin saamiseksi pehmeän varjon sijaan.
Yhdistäminen pyöristettyihin kulmiin
Varjoja ja pyöristettyjä kulmia käytetään jatkuvasti yhdessä — kortit, painikkeet ja modaalit yhdistävät lähes aina molemmat. Käytä Border Radius -generaattoria saman elementin kulmien pyöristämiseen ja käytä sitten molempia luotuja CSS-määrityksiä yhdessä.
Usein kysytyt kysymykset
Mitä eroa on sumennuksella ja levityksellä?
Sumennussäde pehmentää varjon reunaa — suuremmat arvot saavat sen häipymään asteittaisemmin. Levityssäde muuttaa varjon kokoa ennen sumennusta — positiivinen levitys tekee varjosta elementtiä suuremman kaikilta puolilta, negatiivinen levitys kutistaa sitä. Useimmat arkiset varjot käyttävät sumennusta levityksen jäädessä nollaan.
Miksi käyttää rgba()-arvoa pelkän hex-värin sijaan varjolle?
Täysin läpinäkymätön varjo näyttää karkealta ja epärealistiselta — todelliset varjot ovat aina jonkin verran läpinäkyviä, jolloin niiden takana oleva näkyy hieman läpi. rgba() antaa sinun asettaa tuon läpinäkyvyyden suoraan, minkä vuoksi tämä työkalu tulostaa aina värin alfa-arvon kanssa kiinteän hex-arvon sijaan.
Mitä inset-avainsana tekee?
Ilman inset-arvoa varjo piirretään elementin reunuksen ulkopuolelle, ikään kuin elementti leijuisi sivun yläpuolella. Inset-arvon kanssa varjo piirretään reunuksen sisään, jolloin elementti näyttää painetulta tai upotetulta — yleisesti käytetty aktiivisissa/painetuissa painiketiloissa tai syöttökentissä.
Voinko pinota useamman kuin yhden varjon samalle elementille?
Kyllä — CSS:n box-shadow hyväksyy pilkulla erotetun listan, ja selaimet piirtävät ne annetussa järjestyksessä (ensimmäinen varjo on päällimmäisenä). Yleinen tekniikka kerrostaa tiukan, tummemman varjon leveämmän, pehmeämmän varjon kanssa realistisemman syvyyden saamiseksi kuin kumpikaan yksinään antaisi.
Vaikuttaako box-shadow asetteluun vai pelkkään ulkoasuun?
Vain ulkoasuun — box-shadow ei koskaan vaikuta elementin kokoon tai ympäröivien elementtien sijaintiin, edes suurilla sumennus- tai levitysarvoilla. Jos varjo leikkautuu visuaalisesti, tarkista vanhempielementin overflow: hidden -asetus varjon omien arvojen sijaan.