CSS box-shadow-generator: livevy, kopiera koden

CSS box-shadow-generator

Den här generatorn bygger ett enda CSS box-shadow-värde utifrån sex reglage: horisontell förskjutning, vertikal förskjutning, oskärperadie, spridningsradie, en skuggfärg med ett eget opacitetsreglage och en inset-brytare. Två extra färgväljare bestämmer förhandsgranskningsrutan och dess bakgrund, så att skuggan syns tydligt mot både ljusa och mörka ytor, och fyra förinställningar, soft, hard, glow och inset, laddar en färdig kombination med ett klick. Varje ändring uppdaterar direkt box-shadow-raden under förhandsgranskningen, redo att kopieras.

Så byggs box-shadow-värdet

CSS skriver en skugga i en fast ordning: horisontell förskjutning, vertikal förskjutning, oskärperadie, spridningsradie, sedan en färg; för att rita skuggan innanför rutans kant i stället för bakom den sätts ordet inset först. Horisontell och vertikal förskjutning flyttar skuggan i sidled eller lodrätt, och båda tar negativa värden ner till -50px, så en skugga kan hamna till vänster om rutan eller ligga ovanför den. Oskärperadien, från 0 till 100px, mjukar upp skuggans kant, och spridningsradien, från -50 till 50px, förstorar eller krymper skuggan oberoende av rutans egen storlek. Färgväljarens hexvärde delas upp i sina röd-, grön- och blåkomponenter, och opacitetsreglaget, från 0 till 1, blir det fjärde värdet inuti rgba(); vid 0 är skuggan helt genomskinlig, vid 1 stämmer den exakt med den valda färgen.

Uträknat exempel

Med en horisontell förskjutning på 6px, en vertikal på -6px, en oskärpa på 18px och en spridning på 0px, tillsammans med skuggfärgen #0369a1 och en opacitet på 0,3, blir resultatet box-shadow: 6px -6px 18px 0px rgba(3, 105, 161, 0.3). Hexkoden #0369a1 delas upp i rött 3, grönt 105 och blått 161, och 0,3 från opacitetsreglaget blir direkt det fjärde rgba()-värdet utan ytterligare omvandling. Att slå på inset med samma sex värden ritar den identiska skuggan innanför rutans kant i stället för bakom den, en effekt som ofta används för intryckta knappar eller nedsänkta inmatningsfält.

Kopieringsbar CSS-utdata

.kort {
  box-shadow: 6px -6px 18px 0px rgba(3, 105, 161, 0.3);
}