CSS Visual ToolsLesson 83Free preview
Neumorphism Generator
This lesson is part of Web Developer Tools · All levels
Summary
The neumorphism generator creates elements with soft shadows that appear to merge with the background. This effect uses two shadows, one light and one dark, on the same background color. Neumorphism looks subtle, but the contrast is low so it's less suitable for primary control.
Key points
- The colors of the elements and the background should be the same or very similar
- Two shadows are used: light on one side, dark on the other.
- The shadow of the inset gives the impression of a depressed element
- Low contrast makes it difficult for users to distinguish the control limits
- Neumorphism is safer for decorative accents than the main button
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.