Neumorphism, also known as “soft UI,” is a modern web design trend that blends minimalism with subtle 3D effects. It uses light shadows and highlights to create elements that appear to extrude from the background, giving buttons, cards, sliders, toggles, and input fields a soft, tactile feel. Unlike flat design, neumorphism emphasizes depth and realism while maintaining a clean and minimal aesthetic. With CSS, designers can achieve this effect using properties like box-shadow, border-radius, and careful color selection to create subtle contrasts. This approach not only enhances visual appeal but also improves user engagement by making UI elements feel interactive and clickable. In this post, we’ll showcase 10 of the latest CSS Neumorphism examples that are easy to implement, responsive, and perfect for modern websites, portfolios, dashboards, or apps, helping your design stand out with elegance and sophistication.
Neumorphic Button
Neumorphic buttons are iconic in soft‑UI design, giving a tactile feel using subtle dual shadows. They simulate being slightly raised or pressed into the background. On hover or click, shadows invert to mimic a pressed effect, providing interactive feedback. Rounded edges, minimalistic colors, and smooth transitions allow them to blend naturally while remaining distinct. Ideal for landing pages, dashboards, or apps, they enhance usability and visual appeal. Paired with a neutral background, the depth effect stands out, making these buttons perfect for primary calls-to-action or floating actions.
Features
Raised/pressed effect with dual shadows Smooth hover & active transitions Rounded corners for softness Tactile feel for usability Minimalistic & modern lookNeumorphic Card / Panel
Neumorphic cards use soft shadows and rounded edges to create subtle depth, making them appear gently raised from the background. They can contain images, text, icons, or buttons, making them ideal for dashboards, profiles, or feature highlights. The color is usually very close to the background, maintaining cohesion and elegance. Cards may have hover effects that slightly adjust shadows for a dynamic feel. This design emphasizes a calm, minimalistic aesthetic while maintaining functionality. It’s perfect for modern web interfaces that require clean presentation of content while keeping the soft UI theme consistent.
Features
Raised panel effect Rounded corners for smooth look Light/dark dual shadows for depth Hover animation for interactivity Flexible for text, images, or buttonsNeumorphic Input Field
Neumorphic input fields create the impression of being embedded in the surface using inset shadows. On focus, shadows can intensify to give a pressed-in effect, providing natural user feedback. These inputs typically have rounded edges, low contrast, and subtle transitions, giving a clean, tactile feel. They work well for login forms, search bars, or data-entry fields. Maintaining a matching background color enhances the illusion of depth while keeping the interface elegant and minimalistic. The soft UI approach improves usability and aesthetic appeal, offering a modern alternative to flat input designs.
Features
Inset shadows for embedded look Focus animation for interaction feedback Rounded corners for softness Neutral background for cohesion Minimalistic and modern UINeumorphic Toggle / Switch
Neumorphic toggles give a soft, realistic feel for on/off states. The knob appears raised in the “off” state and pressed in the “on” state using shadows to simulate physicality. Smooth transitions make the state change feel natural, while rounded edges maintain the soft aesthetic. These toggles are ideal for dark/light mode switches or preference settings, providing both visual appeal and intuitive functionality. The subtle shadows and minimalistic design integrate seamlessly with modern web interfaces.
Features
Raised vs inset knob for states Smooth animation on toggle Consistent soft UI styling Rounded, friendly edges Perfect for settings and modesNeumorphic Radio / Checkbox
Neumorphic radios and checkboxes bring soft UI to form controls. Selected elements appear inset, while unselected ones look raised, using dual shadows to create depth. Smooth hover and click transitions enhance interactivity. Rounded shapes maintain a gentle aesthetic. These controls reduce visual clutter and feel more tactile than flat designs. Ideal for preference panels, forms, or settings pages, they offer both elegance and usability.
Features
Inset/outset shadow for states Smooth hover & click transitions Rounded corners for soft look Consistent neumorphic style Minimalistic and tactile designNeumorphic Loader / Spinner
Neumorphic loaders use smooth animations with inset/outset shadows to simulate depth and movement. Circular spinners often pulse or rotate, giving a soft, tactile appearance. The low-contrast colors maintain elegance, and the animation provides a calm loading experience. Perfect for dashboards, apps, or websites where a subtle yet visually pleasing loader is needed.
Features
Soft shadow animation Inset/outset depth illusion Circular or ring shapes Subtle, calming effect Integrates with soft UI backgroundNeumorphic Animated Loader / Gradient
Animated neumorphic loaders add dynamic movement to soft UI components. Using rotating shapes, morphing shadows, or gradient effects, they create depth while remaining minimalistic. These loaders grab attention without harsh contrast, maintaining a modern aesthetic. Ideal for interactive apps, dashboards, or attention-focused UI elements.
Features
Rotating or morphing animation Gradient & shadow depth effects Smooth, continuous motion Soft UI integration Visually engaging loading indicatorNeumorphic Grid / Card Collection
Neumorphic grids combine multiple cards in a soft UI layout. Each card appears slightly raised, with subtle shadows for depth. Hover effects enhance interactivity. Rounded edges and minimal colors create a cohesive, modern aesthetic. Ideal for dashboards, product grids, or portfolio layouts.
Features
Consistent raised card style Hover shadow effects Rounded corners for uniformity Minimalistic design Flexible layout for multiple cardsNeumorphic Animated Rings / Modal Effects
Soft UI rings or modal animations use subtle shadows and pulsing effects to create depth. The rings expand, contract, or rotate, enhancing visual interest. Great for modals, notifications, or micro-interactions, they maintain elegance while providing attention cues without harsh contrast.
Features
Pulsing or rotating shadows Inset/outset depth effect Smooth animation loops Soft, minimalistic UI Ideal for interactive focus elementsNeumorphic Profile / Card Component
Neumorphic profile cards display user information in a soft, elegant panel. Subtle shadows raise the card and the avatar, creating depth. Rounded corners and minimalistic design make the component feel modern. Buttons or action icons can also adopt soft UI styling. Perfect for dashboards, team pages, or about sections.
Features
Raised card panel Soft-shadowed avatar Rounded edges for elegance Action buttons with tactile feel Cohesive, modern designCSS Neumorphism is an elegant design approach that combines simplicity with depth, creating a visually appealing and tactile interface. By carefully balancing shadows, highlights, and color contrast, you can craft UI elements that feel soft yet interactive, enhancing user experience and engagement. The 10 examples shared in this post demonstrate the versatility of neumorphism, from buttons and cards to sliders, toggles, and input fields, all designed to provide a modern, minimalist aesthetic. These elements can be customized to match various color schemes, layouts, and branding needs, allowing developers to create interfaces that are both unique and functional. When combined with other modern design techniques like glassmorphism, gradients, and responsive layouts, neumorphism can elevate your projects to the next level. By mastering these CSS techniques, you can create stylish, innovative, and professional-looking web interfaces that captivate users and set your designs apart.
