Create stunning neumorphic UI elements with real-time preview and instant CSS generation
The Neumorphism UI Generator is a powerful, interactive web tool that empowers designers and developers to create beautiful neumorphic interface elements effortlessly. Experience the perfect blend of skeuomorphism and flat design with real-time visual feedback and instant CSS code generation.
- Real-time Preview - See your changes instantly as you design
- CSS Code Generation - Get production-ready CSS with one click
- Copy to Clipboard - Seamlessly integrate generated code into your projects
- Color Picker with hex code input support
- Dynamic Sliders for size, border radius, shadow distance, and intensity
- Four Shape Variants: Flat, Concave, Convex, and Pressed
- Light Direction Control for precise shadow positioning
- Custom Shadow Colors for advanced styling
- Predefined Color Combinations for rapid prototyping
- Responsive Design that works on all screen sizes
- Smooth Animations for enhanced user experience
Experience the generator without any setup:
Built with modern web technologies for optimal performance:
- HTML5 - Semantic structure
- CSS3 - Advanced styling and animations
- Vanilla JavaScript (ES6+) - Interactive functionality
Zero external dependencies - Lightweight and fast! 🚀
Getting started is incredibly simple:
# Clone the repository
git clone https://github.com/divyanshupatel17/make-your-own-neumorphism.git
# Navigate to project directory
cd make-your-own-neumorphism
# Open in browser
open index.htmlOr simply download and open index.html in any modern browser!
- 🎨 Choose Colors - Use the color picker or enter hex codes
- 📏 Adjust Parameters - Fine-tune size, radius, and shadow properties
- 🔀 Select Shape - Pick from flat, concave, convex, or pressed styles
- 💡 Set Light Direction - Control shadow positioning
- 🎯 Preview Live - Watch your design update in real-time
- 📋 Copy CSS - Get your generated code instantly
neumorphism-ui-generator/
├── index.html # Main application structure
├── styles.css # Complete styling and neumorphic designs
├── script.js # Interactive functionality and real-time updates
└── README.md # Project documentation
Optimized for modern browsers with full ES6+ support:
| Browser | Version |
|---|---|
| Chrome | Latest ✅ |
| Firefox | Latest ✅ |
| Safari | Latest ✅ |
| Edge | Latest ✅ |
- Client-side Processing - Lightning-fast response times
- Zero Server Dependency - Works completely offline
- Optimized Calculations - Smooth interactions even on older devices
- Minimal Bundle Size - Under 50KB total
Extend the generator's capabilities:
// Add new shape variants
const newShapes = {
'ultra-pressed': 'inset 8px 8px 16px #c3c3c3, inset -8px -8px 16px #ffffff'
};
// Implement custom color schemes
const customPalettes = {
'ocean': ['#0077be', '#00a8cc', '#7fb069']
};We welcome contributions! Here's how to get involved:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- New neumorphic shape variations
- Additional color palette presets
- Enhanced CSS output options
- Mobile-specific optimizations
- Accessibility improvements
This project is licensed under the MIT License - see the LICENSE file for complete details.
- Advanced gradient support
- Animation presets
- Export to different formats (SCSS, Stylus)
- Component library integration
- Dark mode toggle
- Inspired by the innovative Neumorphism design trend
- Color theory implementation adapted from open-source algorithms
- Community feedback and contributions
Divyanshu Patel
📧 Questions or suggestions? Open an issue
Made with 💜 for the design community
⭐ Star this repo if it helped you create beautiful neumorphic designs!