These soft UI button components show the raised side of neumorphic design. Buttons seem to rise from the surface, lit from the top left with a light and a dark shadow.
Soft UI works through light. A pale highlight on one side and a darker shadow on the other make each control look raised. This set shows that effect on a round button, pill buttons, toggles and a progress bar, with lavender as the only accent. It is a good starting point if you want a gentle, tactile feel in a prototype.
What you get
- A round icon button and two pill buttons, one in lavender
- A pair of toggles, one off and one on, in a dashed frame
- A progress bar with a lavender fill
- A title pill that reads Soft UI shadow neumorphic design buttons
- A light grey surface with soft edges
How to use it in Figma
Press the copy button and paste into Figma with Ctrl or Cmd + V. Select a button to see its shadow effects, then change the colour of the surface and the buttons together. Both must stay close in tone for the style to work.
Best for
- Dashboards with a calm, tactile feel
- Music players and smart devices
- Concept designs and portfolio shots
- Experiments with new UI styles
Customisation tips
- Limit the style to a few controls. Too much softness makes it hard to see what can be pressed.
- Check text colours with the WCAG colour contrast checker before you ship.
- Compare the inset version in the neumorphic button UI kit.
