border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;De CSS-neumorfismegenerator bouwt soft-UI-elementen - de stijl waar een vorm er zachtjes uit wordt geƫxtrudeerd of in de achtergrond wordt gedrukt met behulp van gepaarde lichte en donkere schaduwen. Je stelt de oppervlaktekleur, schaduwafstand, onscherpte, contrastintensiteit, hoekstraal en vorm in, bekijkt een live preview en kopieert 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.
Kies de kleur van uw element, die overeenkomt met de achtergrond van de pagina erachter - neuphysmisme is afhankelijk van het element en de pagina die dezelfde basiskleur delen.
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.
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 het gegenereerde blok - grensstraal, achtergrond en de gekoppelde box-shadow - en plak het op uw kaart, knop of paneel.
De lichte en donkere schaduwtinten zijn afgeleid van je oppervlaktekleur, dus het soft-UI-effect ziet er altijd gebalanceerd uit zonder handmatige aanpassingen
Plat, concaaf, convex en geperste bekleding en gezonken uiterlijk, met geperst met ingezette schaduwen en concaaf/convex die een subtiele gradiƫnt toevoegt
Schuifregelaars voor schaduwafstand, onscherpte, contrastintensiteit en hoekstraal laten je het effect van nauwelijks tot dramatisch kiezen
Het voorbeeld staat op een bijpassende achtergrond, zodat de zachte schaduwen correct worden gelezen en onmiddellijk worden bijgewerkt terwijl u bewerkt
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset ā then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius ā then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!