How to Create Neumorphism Design in Figma Easily
To create
neumorphism in Figma, use a soft background color and add two shadows: a light shadow on the top-left and a dark shadow on the bottom-right. Apply these shadows to shapes or buttons to get the soft, extruded look typical of neumorphic design.Syntax
Neumorphism in Figma is created by applying two shadows to a shape:
- Background: Use a soft, neutral color like light gray or pastel.
- Light Shadow: A white or very light shadow with negative offset (top-left).
- Dark Shadow: A darker shadow with positive offset (bottom-right).
- Blur and Spread: Adjust blur radius and spread to soften the shadows.
This combination creates the illusion of a soft, raised or inset surface.
none
Fill color: #E0E0E0 Shadow 1: Color #FFFFFF, X offset: -5, Y offset: -5, Blur: 10, Spread: 0 Shadow 2: Color #A3B1C6, X offset: 5, Y offset: 5, Blur: 10, Spread: 0
Example
This example shows how to create a neumorphic button in Figma by applying two shadows to a rounded rectangle.
none
1. Draw a rounded rectangle with fill color #E0E0E0. 2. Add first shadow: color #FFFFFF, X offset -5, Y offset -5, Blur 10. 3. Add second shadow: color #A3B1C6, X offset 5, Y offset 5, Blur 10. 4. Adjust corner radius to 20 for a soft look. 5. Add text label centered on the shape.
Output
A soft, raised button with subtle light and dark shadows giving a 3D effect on a light gray background.
Common Pitfalls
Common mistakes when creating neumorphism in Figma include:
- Using shadows that are too harsh or with high opacity, which breaks the soft look.
- Choosing background colors that are too dark or saturated, making shadows look unnatural.
- Not balancing the light and dark shadows, causing the effect to look flat or confusing.
- Ignoring contrast and accessibility, which can make text hard to read on neumorphic elements.
none
Wrong Shadow Setup: Shadow 1: Color #000000, X offset 10, Y offset 10, Blur 5 Shadow 2: Color #FFFFFF, X offset -10, Y offset -10, Blur 5 Right Shadow Setup: Shadow 1: Color #FFFFFF, X offset -5, Y offset -5, Blur 10 Shadow 2: Color #A3B1C6, X offset 5, Y offset 5, Blur 10
Quick Reference
| Property | Recommended Value | Purpose |
|---|---|---|
| Fill Color | #E0E0E0 (light gray) | Soft neutral background |
| Light Shadow Color | #FFFFFF | Simulates light source highlight |
| Light Shadow Offset | -5, -5 | Position top-left shadow |
| Light Shadow Blur | 10 | Softens shadow edges |
| Dark Shadow Color | #A3B1C6 | Simulates shadowed area |
| Dark Shadow Offset | 5, 5 | Position bottom-right shadow |
| Dark Shadow Blur | 10 | Softens shadow edges |
| Corner Radius | 15-20 | Smooth rounded edges for softness |
Key Takeaways
Use two shadows with opposite offsets to create the soft 3D effect of neumorphism.
Choose a light, neutral background color to enhance the subtle shadows.
Balance shadow colors and blur to avoid harsh or flat appearances.
Keep accessibility in mind by ensuring enough contrast for text on neumorphic elements.
Adjust corner radius for a smooth, soft shape that fits neumorphic style.