CSS Box Shadow Generator

En box-shadow-erklæring har seks bevægelige dele — X- og Y-forskydning, sløring, spredning, farve og det valgfri inset-nøgleord — og den eneste måde at få dem rigtigt på er at se dem. Denne generator lægger hver del på en skyder og gengiver resultatet på et forhåndsvisningskort, mens du trækker, så CSS-linjen i bunden altid er præcis det, du kigger på.

Virkelige skygger er sjældent et enkelt lag. Laglisten lader dig stable op til fire skygger i én erklæring: en stram mørk linje til kantdefinition plus en bred blød vask til elevation, eller det lys-mørke par, der definerer neumorfisme. Vælg et lag for at redigere det, fjern dem du ikke har brug for, og den kombinerede box-shadow-værdi opdateres live.

Skygger læses meget anderledes på mørke grænseflader, hvor en sort skygge på en næsten sort side simpelthen forsvinder. Skiftet til forhåndsvisningsbaggrund skifter bagtæppet mellem lys og mørk, så du kan tjekke begge temaer, inden du sender koden afsted. Forudindstillingssider dækker de varianter, folk rent faktisk søger efter: en blød elevationsskygge, en inset-brønd, neumorfismeopskriften med to lag og en diskret kortskygge.

Ligesom alle værktøjer på dette site er generatoren gratis og kører udelukkende i din browser: ingen upload, ingen konto, og den fortsætter med at virke offline, når siden først er indlæst.