CSS-skygge-generator
Hva er CSS-skygge-generator
En CSS-skygge-generator lar deg bygge en box-shadow visuelt og kopiere den nøyaktige CSS-en. Sett den horisontale og vertikale forskyvningen, uskarphetsradiusen, spredningen og skyggefargen med tettheten, og se forhåndsvisningen oppdatere seg mens du drar i hver glidebryter. Du kan stable flere skygger på samme element og bytte hvilket som helst lag til innvendig, slik at utdatafeltet alltid viser en ferdig box-shadow-deklarasjon å lime inn.
Slik bruker du det
- Dra i forskyvningsglidebryterne for å flytte skyggen horisontalt og vertikalt.
- Sett uskarphetsradiusen for en myk kant og spredningen for å gjøre skyggen større eller mindre.
- Velg skyggefargen, juster tettheten og slå på innvendig for en skygge på innsiden.
- Legg til flere lag hvis du trenger det, og kopier den genererte CSS-en fra utdatafeltet.
Når du bør bruke det
Trenger du en diskret kortskygge som ser moderne ut i stedet for hard? Sett forskyvningen til 0px og 10px, 20px uskarphet, ingen spredning og svart farge med 25% tetthet, og kopier så box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); rett inn i stilarket ditt. Like praktisk for hover-tilstander på knapper, dybde i lag eller en innvendig skygge som får et inntastingsfelt til å se inntrykt ut.
Ofte stilte spørsmål
Hva betyr verdiene i box-shadow?
I rekkefølge er det den horisontale forskyvningen, den vertikale forskyvningen, uskarphetsradiusen, spredningen og fargen. Positive forskyvninger skyver skyggen mot høyre og ned, uskarphet mykner kanten, og spredningen gjør hele skyggen større eller mindre før den blir uskarp.
Hva gjør spredningsverdien?
Spredningen endrer størrelsen på skyggen før uskarphet blir lagt til. En positiv verdi gjør skyggen større enn elementet, og en negativ trekker den inn, noe som er nyttig for tette skygger som bare titter frem på én side.
Kan jeg stable mer enn én skygge?
Ja. Legg til så mange lag du vil, og hvert blir en kommaseparert skygge i samme box-shadow-regel. Å stable en myk og bred skygge under en tettere og nærmere er en vanlig måte å få realistisk dybde på.
Hva er en innvendig skygge?
En innvendig skygge tegnes inne i elementet i stedet for bak det, så boksen ser inntrykt eller nedsenket ut. Slå på innvendig på et hvilket som helst lag for å bytte, noe som fungerer godt for inntastingsfelt og inntrykte knapper.
Kan jeg dele verktøyet med verdiene mine fylt inn?
Ja. Nettadressen oppdateres automatisk mens du justerer glidebryterne. Kopier den fra adressefeltet eller bruk Del-knappen, så ser alle som åpner lenken nøyaktig samme skygge klar til bruk.
Relaterte verktøy
Bildeforhold Kalkulator
Regn ut bildeforholdet, finn manglende bredde eller høyde og endre størrelse på bilder og video uten å forvrenge proporsjonene. Gratis.
Strekkode-generator
Lag strekkoder gratis på nett. Støtter EAN-13 og Code 128. Last ned som SVG eller PNG i høy oppløsning — alt genereres i nettleseren.
Base64-dekoder
Dekod Base64 til vanlig tekst direkte i nettleseren. Gratis Base64-dekoder med full UTF-8-støtte. Lim inn strengen og få resultatet med en gang.