CSS box-shadow generator: livevisning, kopiér koden

CSS box-shadow generator

Denne generator bygger én CSS box-shadow-værdi ud fra seks indstillinger: vandret forskydning, lodret forskydning, sløringsradius, spredningsradius, en skyggefarve med sin egen opacitetsskyder og en inset-kontakt. To ekstra farvevælgere sætter forhåndsvisningsboksen og dens baggrund, så skyggen ser rigtig ud på både lyse og mørke flader, og fire forudindstillinger, soft, hard, glow og inset, indlæser en færdig kombination med ét klik. Hver ændring opdaterer straks box-shadow-linjen under forhåndsvisningen, klar til at blive kopieret.

Sådan opbygges box-shadow-værdien

CSS skriver en skygge i en fast rækkefølge: vandret forskydning, lodret forskydning, sløringsradius, spredningsradius, derefter en farve; for at tegne skyggen inden for boksens kant i stedet for bag den sættes ordet inset foran. Vandret og lodret forskydning flytter skyggen til siden eller lodret, og begge accepterer negative værdier ned til -50px, så en skygge kan falde til venstre for boksen eller ligge over den. Sløringsradius, fra 0 til 100px, blødgør skyggens kant, og spredningsradius, fra -50 til 50px, forstørrer eller formindsker skyggen uafhængigt af boksens egen størrelse. Farvevælgerens hexværdi opdeles i dens røde, grønne og blå komponenter, og opacitetsskyderen, fra 0 til 1, bliver den fjerde værdi inde i rgba(); ved 0 er skyggen helt gennemsigtig, ved 1 svarer den præcist til den valgte farve.

Gennemregnet eksempel

Med en vandret forskydning på -5px, en lodret på 10px, en sløring på 18px og en spredning på -4px, sammen med skyggefarven #6d28d9 og en opacitet på 0,35, bliver resultatet box-shadow: -5px 10px 18px -4px rgba(109, 40, 217, 0.35). Hexkoden #6d28d9 opdeles i rødt 109, grønt 40 og blåt 217, og 0,35 fra opacitetsskyderen bliver direkte den fjerde rgba()-værdi uden yderligere omregning. At slå inset til med de samme seks værdier tegner den identiske skygge inden for boksens kant i stedet for bag den, en effekt der ofte bruges til nedtrykte knapper eller forsænkede inputfelter.

Kopierbar CSS-output

.kort {
  box-shadow: -5px 10px 18px -4px rgba(109, 40, 217, 0.35);
}