neumorphism soft-ui input form recessed inset neumorphic search bar soft-UI settings form recessed input in monochrome dashboard input fields look identical to cards need visual distinction between raised and recessed elements form feels flat without border-heavy style
Soft Input
Fetch snippet JSON:
curl https://webspire.de/snippets/soft-ui/input.json Preview
Background
Customize
Quick Start
<input class="soft-input px-4 py-3 w-full" type="text" placeholder="Search…">Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 545 bytes · 28 lines
- Custom Properties
-
--soft-bg--soft-light--soft-shadow--soft-radius--soft-focus - Classes
-
.soft-input
neumorphism soft-ui input form recessed inset
The inset shadow makes the input appear recessed — the visual inverse of a raised button. This is the core neumorphism vocabulary: raised = interactive (push), recessed = receptive (type).
Search field
<div style="background: oklch(93% 0.01 75); padding: 2rem;">
<label for="q" class="block text-sm font-medium text-slate-600 mb-2">Search</label>
<input id="q" class="soft-input px-4 py-3 w-full max-w-sm text-slate-700"
type="search" placeholder="Type to search…">
</div>Form row
<div style="background: oklch(93% 0.01 75); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; max-width: 20rem;">
<label class="flex flex-col gap-1">
<span class="text-sm font-medium text-slate-600">Name</span>
<input class="soft-input px-4 py-3" type="text" placeholder="Jane Smith">
</label>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium text-slate-600">Email</span>
<input class="soft-input px-4 py-3" type="email" placeholder="jane@example.com">
</label>
</div>