Neumorfism CSS Shadow — Tvåskiktskod
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
Den här sidan öppnar generatorn med det klassiska neumorfa paret som redan är byggt: en ljus lagerförskjutning −8px/−8px i nästan vitt och ett mörkt lagerförskjutning 8px/8px i en dämpad gråblå, båda suddiga 16px. Växla mellan de två lagren i lagerlistan för att ställa in varje sida oberoende av varandra.
Neumorfism (mjukt användargränssnitt) är den präglade stilen som nådde sin topp runt 2020: element ser ut som extruderade från bakgrunden snarare än att sväva ovanför den. Ärligt talat kommer det med riktiga kompromisser – effekten fungerar bara när elementets bakgrund matchar sidans bakgrund, och kanterna med låg kontrast kan skada tillgängligheten – så de flesta team använder det nu som en accent, inte ett helt designspråk.
Om stilen passar ditt projekt är denna tvålagersdeklaration den kanoniska utgångspunkten: kopiera CSS, ställ in elementet och sidbakgrunden till samma mjuka grå färg och lägg till en matchande kantradie. Allt körs lokalt i din webbläsare.