CSS box-shadow-generator
Skapa ett CSS-box-shadow-varde fran forskjutning, oskarphet, spridning och farg, med flera lager och forinstallningar.
CSS box-shadow-generator
Justera den horisontella och vertikala forskjutningen, oskarphetsradien, spridningsradien och fargen, och detta verktyg sammanstaller motsvarande box-shadow-deklaration medan du arbetar. Det ar utformat for det vardagliga fallet - ett kort, en knapp, en modal som behover lyfta fran sidan - saval som for lagrade skuggor som bestar av flera skuggor staplade tillsammans, tekniken bakom den mjuka, realistiska djupet som anvands i de flesta moderna designsystem.
Rullgardinsmenyn Forinstallningar erbjuder subtil, medel och stark elevation, var och en med forinsstalt lagernummer, forskjutning och oskarphet; valj Anpassad for att driva varje varde sjalv. Alternativet Lager styr hur manga skuggor som staplas: varje tillagt lager vaxer forskjutningen och oskarphetan efter sitt index och sanker dess opacitet, vilket omvandlar en enda platt skugga till en mjuk, overtygande. Inzet vander skuggan inat for tryckta element, opacitet kontrollerar hur starkt fargen las, och enhetsomkopplaren matar ut px eller rem. Sla pa dark mode-varianten for en andra, starkare deklaration insvetp i ett @media (prefers-color-scheme: dark)-block - en skugga behover hogre opacitet for att forbli synlig mot en mork bakgrund. Valj om resultatet kommer ut som en enda rad, en --box-shadow-anpassad egenskap eller en .box-shadow-klass, och lagg till en motsvarande filter: drop-shadow-rad for element som box-shadow inte kan na, sasom en SVG-ikon eller en transparent PNG.
Varje varde ar begransat till ett vettigt intervall, och en okand farg atergars till svart snarare an att producera ogiltigt CSS, sa utmatningen klistras alltid snyggt in i ett formatblad.
Allt kors i din webblasare nar du justerar kontrollerna - ingen farg eller genererad CSS skickas nagonstans. Kopiera resultatet, ladda ned det som en .txt-fil, eller skicka det till ett annat verktyg for att fortsatta arbeta med det.