border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Wat is de CSS-neumorfismegenerator?
De CSS Neumorphism Generator bouwt soft-UI elementen - de stijl waarbij een vorm er zachtjes uitziet geëxtrudeerd van of geperst in de achtergrond met behulp van gepaarde lichte en donkere schaduwen Je stelt de oppervlaktekleur, schaduwafstand, onscherpte, contrastintensiteit, hoekradius, en vorm in, bekijk een live preview, en kopieer de exacte CSS.
Neumorfisme werkt door twee box-shadows te plaatsen op een element dat zijn achtergrond deelt met de pagina: een lichtere schaduw op de linkerbovenhoek en een donkerdere rechtsonder. Het is kieskeurig met de hand om de twee schaduwkleuren en offsets er overtuigend zacht uit te laten zien. Deze tool ontleent de lichte en donkere tinten automatisch aan je oppervlaktekleur, zodat het effect er altijd in evenwicht is.
Alles draait in uw browser. Kies een voorinstelling, pas de schuifregelaars aan, schakel tussen plat, concaaf, convex en geperste vormen en kopieer de CSS. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.
Neumorfisme is de moeite waard om met heldere ogen te gebruiken over de belangrijkste zwakte, namelijk toegankelijkheid. De stijl werkt door een lichte schaduw en een donkere schaduw op een oppervlak te plaatsen dat bijna dezelfde kleur heeft als de achtergrond, dus de rand van een besturing wordt bepaald door een verschil van enkele procenten in luminantie. Dat leest voor sommige kijkers net zo elegant en voor iedereen onzichtbaar met verminderde contrastgevoeligheid, op een zwak scherm of buitenshuis. Het mislukt WCAG 1.4.11, dat vraagt om een verhouding van 3:1 op de grens van een interactief onderdeel. Het gebruikelijke compromis is om de stijl voor decoratieve oppervlakken te behouden en echt interactieve elementen een echte rand of een duidelijke focusstatus te geven. Schaduwkleuren zijn hier afgeleid van de oppervlaktekleur, dus een donker oppervlak dat is eerder grijs.
Hoe gebruik je de CSS-neumorfismegenerator?
Stel de oppervlaktekleur in
Kies de kleur van uw element, die moet overeenkomen met de pagina achtergrond erachter - neumorfisme is afhankelijk van het element en de pagina delen dezelfde basiskleur.
stem de schaduwen af
Pas afstand, onscherpte en intensiteit aan om te bepalen hoe ver het element van de pagina komt en hoe sterk het licht/donker contrast is.
Kies een vorm
Schakel tussen plat, concaaf, convex en geperst. Pressed gebruikt inzetschaduwen om er gezonken uit te zien, terwijl concaaf en convex een subtiel verloop toevoegen.
Kopieer de CSS
Kopieer het gegenereerde blok - randradius, achtergrond en de gekoppelde doosschaduw - en plak het op uw kaart, knop of paneel.
Belangrijkste kenmerken
Automatische schaduwkleuren
De lichte en donkere schaduwtinten zijn afgeleid van je oppervlaktekleur, dus het soft-UI-effect ziet er altijd gebalanceerd uit zonder handmatige aanpassingen
Vier vormen
Plat, concaaf, convex en geperste bekleding en gezonken uiterlijk, met geperst met ingezette schaduwen en concaaf/convex die een subtiele gradiënt toevoegt
Volledige controle
Schuifregelaars voor schaduwafstand, onscherpte, contrastintensiteit en hoekstraal laten je het effect van nauwelijks tot dramatisch kiezen
Live voorbeeld
Het voorbeeld staat op een bijpassende achtergrond, zodat de zachte schaduwen correct worden gelezen en onmiddellijk worden bijgewerkt terwijl u bewerkt
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Credit Card Validator
Check a credit card number against the Luhn checksum and detect its card network. Validates the format only, never contacts a bank.
Comments
0 comments
No comments yet. Be the first to share your thoughts!