Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
NeumorphismUI Form
NeumorphismUI is a design trend that combines skeuomorphism with modern aesthetics, creating elements that appear to extrude from the background. When applied to forms, it creates a tactile, interactive feeling that enhances user experience and makes interfaces more engaging.
Syntax
The key to neumorphism is using dual box-shadows to create the illusion of depth
.neumorphic-element {
box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;
/* OR for inset effect */
box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7;
}
Example 1: Basic Login Form
This example demonstrates a neumorphic login form with subtle shadow effects that create depth and interactive hover states
<!DOCTYPE html>
<html>
<head>
<title>Neumorphic Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #e6e6e6;
}
.container {
background-color: #e6e6e6;
border-radius: 20px;
box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;
padding: 30px;
width: 320px;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 1.8rem;
color: #333;
}
.input-container {
position: relative;
margin-bottom: 20px;
}
input {
width: 100%;
background-color: #e6e6e6;
border: none;
border-radius: 10px;
box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7;
padding: 15px 45px 15px 20px;
font-size: 1rem;
transition: box-shadow 0.2s ease;
}
input:focus {
outline: none;
box-shadow: inset -5px -5px 10px #b7b7b7, inset 5px 5px 10px #ffffff;
}
i {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
color: #b7b7b7;
}
button {
width: 100%;
background-color: #ff7f50;
border: none;
border-radius: 10px;
color: #ffffff;
font-size: 1.2rem;
padding: 15px;
margin-top: 20px;
cursor: pointer;
transition: box-shadow 0.2s ease;
}
button:hover {
box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;
}
</style>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<div class="input-container">
<input type="text" placeholder="Username" required>
<i class="fas fa-user"></i>
</div>
<div class="input-container">
<input type="password" placeholder="Password" required>
<i class="fas fa-lock"></i>
</div>
<button type="submit">Sign In</button>
</form>
</div>
</body>
</html>
A neumorphic login form appears with input fields that seem to be carved into the background. Icons float on the right side of inputs, and the submit button rises when hovered.
Example 2: Gradient Contact Form
This example shows a contact form with a gradient background and neumorphic styling
<!DOCTYPE html>
<html>
<head>
<title>Gradient Neumorphic Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
}
.form-container {
display: flex;
flex-direction: column;
padding: 2rem;
border-radius: 1rem;
background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
width: 350px;
}
h2 {
color: #fff;
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
}
input, textarea {
padding: 0.8rem;
border: none;
border-radius: 0.5rem;
background-color: #f7f7f7;
box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.5),
inset -4px -4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
width: 100%;
font-size: 1rem;
}
textarea {
resize: vertical;
min-height: 100px;
}
button {
background-color: #3f6bfe;
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.8rem 1rem;
font-size: 1.2rem;
box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),
-4px -4px 8px rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.5),
-2px -2px 4px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<form class="form-container">
<h2>Contact Us</h2>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message..." required></textarea>
<button type="submit">Send Message</button>
</form>
</body>
</html>
A contact form with a blue gradient background appears, featuring inset input fields and textarea that look carved into the surface, with a floating submit button.
Example 3: Dark Mode Newsletter Form
This example demonstrates a dark-themed neumorphic form for newsletter subscription
<!DOCTYPE html>
<html>
<head>
<title>Dark Neumorphic Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(150deg, #333, #111);
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
border-radius: 1rem;
box-shadow: -4px -4px 4px rgba(255, 255, 255, 0.08),
4px 4px 4px rgba(0, 0, 0, 0.56);
border: 1px solid rgba(255, 255, 255, 0.08);
width: 320px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #64dd17;
}
input {
width: 100%;
padding: 0.8rem;
background-color: transparent;
box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.08),
2px 2px 2px rgba(0, 0, 0, 0.56),
-2px -2px 2px rgba(255, 255, 255, 0.08) inset,
2px 2px 2px rgba(0, 0, 0, 0.56) inset;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
margin-bottom: 1.5rem;
color: #fff;
font-size: 1rem;
}
input::placeholder {
color: #888;
}
button {
background-color: transparent;
color: #ff4040;
border-radius: 0.5rem;
padding: 0.8rem 1.5rem;
font-size: 1.2rem;
box-shadow: -2px -2px 4px rgba(100, 221, 23, 0.12),
4px 4px 4px rgba(0, 0, 0, 0.56);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: transform 0.2s ease, border 0.2s ease;
}
button:hover {
transform: translateY(-2px);
border: solid 1px #64dd17;
}
</style>
</head>
<body>
<form class="form-container">
<h2>Subscribe to Newsletter</h2>
<input type="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</body>
</html>
A dark-themed newsletter subscription form appears with inset input field and button that seem to float when hovered, creating a sophisticated neumorphic effect.
Key Design Principles
| Principle | Description |
|---|---|
| Dual Shadows | Use light and dark shadows to create depth |
| Subtle Colors | Keep background and element colors close in tone |
| Smooth Transitions | Add hover effects for enhanced interactivity |
| Rounded Corners | Use border-radius for softer, more organic shapes |
Conclusion
NeumorphismUI forms create engaging, tactile interfaces that feel modern and interactive. The key is balancing subtle shadows and colors to achieve the characteristic extruded effect while maintaining usability and accessibility.
Updated on: 2026-03-15T17:31:40+05:30
259 Views
Advertisements