CSS & Design
Neumorphism Generator
Create soft UI / neumorphic CSS effects with light direction, shapes, and component presets.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Shape
Light Direction
CSS
background: #e0e5ec; border-radius: 12px; box-shadow: 8px 8px 16px #b0bdcf, -8px -8px 16px #ffffff;
Component Presets
🔒 All CSS generation happens in your browser. Nothing is sent anywhere.
Embed this tool on your website
Copy this code to add the Neumorphism Generator to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/neumorphism" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Neumorphism Generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/neumorphism">OptiPix Neumorphism Generator</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Neumorphism Generator
Last updated: May 2026
מחולל Neumorphism של OptiPix יוצר את אפקט הממשק הרך והמוקפץ באמצעות CSS box-shadow. הגדר את צבע הרקע (אפור נאומורפי קלאסי #e0e5ec או כל צבע אחר), מרחק הצל, טשטוש, עוצמה, וצורה (שטוח, קעור, קמור, או לחוץ/פנימי). בחר את כיוון האור מארבע הפינות. הכלי מחשב אוטומטית צבעי צל בהירים וכהים תואמים מצבע הרקע שלך. הצג תצוגה מקדימה של האלמנט על רקע תואם (נאומורפיזם דורש שהאלמנט והרקע ישתפו את אותו הצבע). בחר מתוך קביעות מוגדרות מראש של רכיבים: כפתור, כפתור לחוץ, כרטיס, שדה קלט, מתג הפעלה, ועיגול. העתק את ה-CSS שנוצר. הכל פועל מקומית בדפדפן שלך.
How It Works
הכלי לוקח את צבע הרקע ומחשב וריאנט בהיר וכהה יותר באמצעות מניפולציה של HSL. אלו הופכים לשני צבעי ה-box-shadow, מוזזים בכיוון האור שנבחר. צורות שטוחות משתמשות ב-box-shadow רגיל; קעור/קמור מוסיפים שכבת מעבר עדינה; לחוץ משתמש בצללים פנימיים.
Use Cases
- •עצב כפתורי ממשק רכים ואלמנטים אינטראקטיביים
- •צור רכיבי כרטיסים נאומורפיים עבור לוחות מחוונים
- •בנה שדות קלט רכים ואלמנטי טפסים
- •עצב מתגי הפעלה וכפתורי רדיו נאומורפיים
- •התנסה בעיצוב נאומורפי עבור אבות טיפוס של אפליקציות
You Might Also Like
If you find Neumorphism Generator useful, check out these related tools: Glassmorphism Generator, CSS Box Shadow Generator, and CSS Gradient Generator. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
מהו נאומורפיזם?
כיצד מחושבים צבעי הצל?
אילו צורות זמינות?
מדוע צבע הרקע חייב להתאים לאלמנט?
האם נתונים כלשהם נשלחים לשרת?
Related Tools
Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur, transparency, and customizable backgrounds.
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
CSS Text Shadow Generator
Create CSS text shadows with visual controls, multiple layers, and creative presets like neon glow, fire, and retro 3D.