CSS Box Shadow Generator
Bygg CSS-box-skuggkod visuellt: skjutreglage för offset, oskärpa, spridning, färg med opacitet, infällt läge och upp till fyra lager med en liveförhandsvisning.
Resultat
En box-shadow-deklaration har sex rörliga delar – X- och Y-förskjutning, oskärpa, spridning, färg och det valfria infällda nyckelordet – och det enda sättet att få dem rätt är att se dem. Den här generatorn placerar varje del på ett skjutreglage och återger resultatet på ett förhandsgranskningskort när du drar, så CSS-raden längst ner är alltid exakt vad du tittar på.
Verkliga skuggor är sällan ett enda lager. Lagerlistan låter dig stapla upp till fyra skuggor i en deklaration: en snäv mörk linje för kantdefinition plus en bred mjuk tvätt för upphöjning, eller det ljusa och mörka paret som definierar neumorfism. Välj ett lager för att redigera det, ta bort de du inte behöver och det kombinerade box-shadow-värdet uppdateras live.
Skuggor läser väldigt olika på mörka gränssnitt, där en svart skugga på en nästan svart sida helt enkelt försvinner. Förhandsgranskningen av bakgrundsväxeln växlar bakgrunden mellan ljus och mörk så att du kan kontrollera båda teman innan leverans. Förinställda sidor täcker de varianter som folk faktiskt söker efter: en mjuk höjdskugga, en infälld brunn, receptet för tvåskiktsneumorfism och en subtil kortskugga.
Liksom alla verktyg på den här webbplatsen är generatorn gratis och körs helt i din webbläsare: ingen uppladdning, inget konto, och den fortsätter att fungera offline när sidan har laddats.