Neumorphism CSS Input Examples

Soft UI text field designs with subtle inset and outset shadows.
Try out each input, then click "Copy CSS" to copy the styles.

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

Create your own custom input designs with these generators:

Generate custom input styles

Generate Tailwind input classes

Generate soft UI buttons

Create neumorphic shadows

Browse input examples in different design styles:

Bold borders and stark contrast

Google's design language

Vibrant color gradients

Clean and simple

Motion and transitions

Dark themed designs

Extract any input style in 2 clicks

Click any element on any website to get its input styles instantly. Frontend Hero gives you 10+ essential developer tools in one browser extension.

Get Frontend Hero now →