border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Der CSS-Neumorphismus-Generator erstellt Soft-UI-Elemente - den Stil, bei dem eine Form mit gepaarten hellen und dunklen Schatten sanft aus dem Hintergrund extrudiert oder in den Hintergrund gedrückt wird. Sie legen die Oberflächenfarbe, Schattendistanz, Unschärfe, Kontrastintensität, Eckenradius und Form fest, sehen sich eine Live-Vorschau an und kopieren den genauen CSS.
Neumorphismus arbeitet, indem zwei Kastenschatten auf einem Element platziert werden, das seinen Hintergrund mit der Seite teilt: einen helleren Schatten oben links und einen dunkleren unten rechts. Die beiden Schattenfarben und Offsets überzeugend weich aussehen zu lassen, ist von Hand pingelig. Dieses Tool leitet die hellen und dunklen Farbtöne automatisch von Ihrer Oberflächenfarbe ab, sodass der Effekt immer ausgeglichen aussieht.
Alles läuft in Ihrem Browser. Wählen Sie eine Voreinstellung, stellen Sie die Schieberegler ein, wechseln Sie zwischen flach, konvex, konvex und gedrückt und kopieren Sie das CSS. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.
Wählen Sie die Farbe Ihres Elements, die dem dahinter liegenden Seitenhintergrund entsprechen soll – Neumorphismus beruht auf dem Element und der Seite, die dieselbe Grundfarbe haben.
Passen Sie Abstand, Unschärfe und Intensität an, um zu steuern, wie weit das Element von der Seite abhebt und wie stark der helle / dunkle Kontrast ist.
Wechseln Sie zwischen flach, konkav, konvex und gedrückt. Gedrückt verwendet eingefügte Schatten, um eingesunken zu sein, während konkav und konvex ein subtiler Farbverlauf hinzugefügt wird.
Kopieren Sie den generierten Block — Randradius, Hintergrund und den gepaarten Box-Shadow – und fügen Sie ihn auf Ihre Karte, Schaltfläche oder Tafel ein.
Die hellen und dunklen Schattentöne werden von Ihrer Oberflächenfarbe abgeleitet, sodass der Soft-UI-Effekt immer ohne manuelles Tweaking ausgeglichen aussieht
Flache, konkave, konvexe und gepresste Abdeckung erhöhte und versunkene Looks, mit eingedrückten Schatten und konkav/konvex Hinzufügen eines subtilen Farbverlaufs
Schieberegler für Schattendistanz, Unschärfe, Kontrastintensität und Eckenradius ermöglichen es Ihnen, den Effekt von kaum einer Stelle bis zu einer dramatischen
Die Vorschau befindet sich auf einem passenden Hintergrund, sodass die weichen Schatten korrekt gelesen werden und sofort aktualisiert werden, während Sie dies bearbeiten
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!