Create Stunning Neumorphic Designs with CSS
A powerful tool for creating neumorphic (soft UI) designs with real-time preview, customizable shadow controls, and multi-format code export. Perfect for buttons, cards, and modern interface elements.
The Neumorphism Generator is a powerful tool for creating neumorphic (soft UI) designs. Neumorphism is a design trend that combines flat design with subtle shadows to create a sense of depth and realism. This tool makes it easy to create, customize, and export neumorphic elements for your web projects.
Tip: Start with one of the built-in presets like "Soft Button" or "Card" to get quick results, then customize to match your design.
The tool features a responsive three-column layout that adapts to different screen sizes:
Left panel with all customization options including dimensions, style type, shadow settings, colors, and advanced options.
Center panel showing real-time preview of your neumorphic element with Element and Context viewing modes.
Right panel with generated code in multiple formats (CSS, SCSS, Tailwind, React, Vue) plus export options.
The Control Panel provides comprehensive customization options for your neumorphic element. Switch between the Controls tab for manual adjustments and the Presets tab for pre-made designs.
Adjust width (50-400px), height (50-400px), and border radius (0-50px) to size your element. Use the slider or type directly into the input field.
Choose from Flat, Inset, Outset, or Pressed styles. Each creates a different depth effect using shadow combinations.
Control shadow distance (1-30px), blur (1-50px), spread (-10 to +10), and intensity (0.1-1.0) for fine-tuned effects.
Set the background color, light shadow color, and dark shadow color. Use the color picker with preset swatches or enter hex values directly.
Note: Use the Reset button to restore default settings at any time.
The tool supports four neumorphic style types, each creating a unique visual effect:
The standard neumorphic style with both light and dark shadows creating a raised appearance. Best for buttons and cards that should look like they're floating above the surface.
Creates a depressed appearance with shadows pointing inward. Ideal for input fields, search bars, or areas that should look carved into the surface.
An enhanced version of flat with stronger, more pronounced shadows. Creates a highly visible 3D effect for important interactive elements.
Simulates a pressed or active state with reduced inner shadows. Perfect for implementing active/pressed states in buttons.
Neumorphism relies heavily on shadow manipulation to create depth. Understanding these settings helps you achieve the perfect effect:
Controls how far the shadows are offset from the element. Larger values create more dramatic depth, while smaller values create a subtler effect.
Determines the softness of the shadow edges. Higher blur values create softer, more diffused shadows, while lower values create sharper, more defined shadows.
Controls how much the shadow expands or contracts. Positive values make shadows larger, negative values make them smaller.
Adjusts the opacity of the shadow colors. Lower intensity creates subtler shadows, while higher intensity creates more contrast.
Proper color selection is crucial for effective neumorphic designs. The tool provides comprehensive color controls:
The main color of your element. For best results, use a slightly off-white or light gray color. The default is #e0e7ff (light indigo).
The highlight shadow (typically white or very light). Creates the illusion of light coming from the top-left. Default is #ffffff.
The shadow color (typically a darker shade of the background). Creates the illusion of shadow on the bottom-right. Default is #a3b1c6.
When gradient mode is enabled, you can set two colors with an adjustable angle (0-360°) for directional gradient effects.
Pro Tip: For authentic neumorphism, ensure your light and dark shadow colors are lighter/darker versions of your background color. The tool includes 80 preset colors to help you choose harmonious combinations.
The Live Preview panel shows your neumorphic element in real-time as you adjust settings. It offers two viewing modes:
Shows your neumorphic element in isolation against a neutral background. Perfect for focusing on the element's appearance and fine-tuning shadow effects.
Shows your element within a mock UI context with other neumorphic components. Helps you visualize how your element will look in a real interface.
The Code Output panel generates production-ready code in multiple formats. Switch between tabs to view different output types:
Standard CSS with class selector. Ready to use in any web project with a simple class="neumorphic-element" assignment.
SCSS with hover and active states. Includes nested selectors for clean, maintainable styling.
Tailwind-compatible output with custom neuro-{style} utility classes. Includes size and border radius approximations.
React component with inline styles. Includes hover animation and click handler. Ready to import and use in React applications.
Vue component with scoped styles. Includes template, script, and style sections for Vue 3 projects.
Save and load your favorite configurations using the Presets feature. Presets are stored locally in your browser and persist across sessions.
Click the + button to save your current configuration. Enter a name and your preset will be added to the list.
Click any preset to instantly apply its configuration. Each preset shows a mini preview and configuration summary.
Download all your presets as a JSON file for backup or to share with others.
Paste JSON data to import presets. Useful for restoring backups or using presets shared by others.
Export your neumorphic design in various formats for use in your projects:
High-resolution PNG image at 2x pixel ratio. Perfect for documentation, presentations, or as design assets.
JPEG format with high quality settings. Good for web use when file size is a concern.
Scalable vector graphics format. Ideal for icons, illustrations, or designs that need to scale to any size.
Download all code formats (CSS, SCSS, Tailwind) in a single bundled file with configuration JSON.
Note: Image exports capture the preview element exactly as shown, including any border settings. For transparent backgrounds, use SVG export.
Here's an example of the generated CSS output for a typical neumorphic element:
.neumorphic-element {
width: 200px;
height: 200px;
border-radius: 20px;
background: #e0e7ff;
box-shadow: 8px 8px 16px 0px rgba(163, 177, 198, 0.3),
-8px -8px 16px 0px rgba(255, 255, 255, 0.3);
border: none;
}const NeumorphicElement = () => {
const styles = {
width: '200px',
height: '200px',
borderRadius: '20px',
background: '#e0e7ff',
boxShadow: '8px 8px 16px 0px rgba(163, 177, 198, 0.3), -8px -8px 16px 0px rgba(255, 255, 255, 0.3)',
};
return (
<div style={styles} className="flex items-center justify-center cursor-pointer">
<span className="text-sm font-medium">Neumorphic</span>
</div>
);
};Learn More: Neumorphism works best with light backgrounds and subtle shadow differences. Experiment with the intensity and blur values to find the perfect balance for your design.