DevToolBoxฟรี
บล็อก

สร้าง CSS Neumorphism - DevToolBox

Generate neumorphism (soft UI) CSS effects with live preview. Customize shadows, colors, shapes. Create flat, concave, convex, and pressed states ฟรี ไม่ต้องสมัครสมาชิก

Settings
#e0e5ec
Neumorphism
/* Neumorphism Effect */
background: #e0e5ec;
border-radius: 20px;
box-shadow: 10px 10px 20px #babfc6, -10px -10px 20px #ffffff;

What is Neumorphism?

Neumorphism (also called soft UI) is a design style that combines flat design with subtle shadows to create soft, extruded shapes. This generator creates neumorphic CSS effects with customizable shadow size, intensity, and four different shape variations.

𝕏 Twitterin LinkedIn

💬 User Feedback

Have suggestions or found a bug? Leave a message and we'll get back to you.
0/2000

ให้คะแนนเครื่องมือนี้

4.1 / 5 · 68 คะแนน

เครื่องมือเพิ่มเติม

🪟สร้าง CSS Glassmorphism🌈สร้างข้อความไล่สี CSS🌈Css Gradient Generator🌓CSS Shadow Generator

Recommended

Tailwind UIBeautiful UI components

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

  1. Choose a background color for your design
  2. Select a shape style: flat, concave, convex, or pressed
  3. Adjust shadow size, intensity, and border radius
  4. Preview the effect in real-time
  5. Copy the CSS code

Use Cases

  • Design soft UI buttons and cards
  • Create neumorphic form inputs
  • Build modern dashboard interfaces
  • Add depth to minimalist designs

FAQ

What makes neumorphism different from flat design?
Neumorphism adds subtle light and dark shadows to create a soft, extruded appearance, while flat design uses no shadows.
What are the shape options?
Four shapes: Flat (basic neumorphism), Concave (inward curve), Convex (outward curve), and Pressed (inset shadow).
Does background color matter?
Yes, neumorphism works best with soft, muted colors. Very dark or very bright colors may not produce the desired effect.