Reading time: 5 min.

Neumorphism is a UI design style known and loved for its retro feel. Neumorphic UIs look as if they were made from extruded plastic and remind you of your old iPod nano and those days when gadgets had real buttons instead of screens. And here is how you can create neumorphic UI elements in Lunacy, a free graphic software.
Lunacy tutorial: Neumorphism in UI design

Since neumorphism relies heavily on using shadows, you’ll mostly work with them a lot throughout this tutorial. You will also learn how to use layer styles, gradients, and icons. The above links will take you to the respective pages of the Lunacy documentation. Just in case you need more details.

To get a better understanding of what we’re going to do and to cut a long story short, I recommend that you first watch this short video and then follow the steps below.

Download project for Lunacy

Creating a panel

1. Let’s start with creating a panel that will keep all our neumorphic UI elements.

2. Select the artboard tool and draw an artboard. I think that 750x500px would be enough.

Set the artboard color to #EBEDF0. Of course, you can choose a color of your own. But remember that it will also be the color of all the UI elements.

Lunacy tutorial: Neumorphism in UI design: Creating a panel

Creating a button

1. Enable the rectangle tool and draw a 50*50px rectangle.

2. Apply a linear gradient fill to the rectangle. The colors are #EBEDF0 at the start and #F2F4F6 towards the end (see the figure below).

3. Set the rectangle’s corner radiuses to 8.

4. Apply two shadows to the rectangle: light and dark.

The settings are as follows:

                              Fill             Opacity      X    Y    Blur    Spread
Light shadow   #FFFFFF      50%          -5   -5    10        0
Dark shadow    #757F8A      50%            5     5    10        0

Lunacy tutorial: Neumorphism in UI design: Creating a button

Saving a style for further use

Let’s save the style of the button. You will it later with other similar UI elements. This will greatly speed up your work.

1. Select the button.

2. In the Inspector, on the Appearance panel, click +.

3. In the displayed dialog box, type the name of the style, say, Grey Outer Shadow.

4. Click OK.

Lunacy tutorial: Neumorphism in UI design: Saving a style for further use

Creating a pressed button

1. Select the button that we’ve created at the previous step and press Ctrl+D to duplicate it.

2. Remove the shadow settings.

3. Add light and dark inner shadows instead. The settings are as follows:

                              Fill             Opacity      X    Y    Blur    Spread
Light shadow   #FFFFFF      50%          -5   -5    10      -2
Dark shadow    #757F8A      50%            5     5    10      -2

Lunacy tutorial: Neumorphism in UI design: Creating a pressed button

4. Save the new style as Grey Inner Shadow.

Creating a colored round button

1. Create a 50x50px ellipse.

2. Apply the following styling:

Fill. Linear gradient: #59ADFF –> #83C2FF.
Shadow. Color #757F8A, Opacity: 50%, X: 5. Y: 5. Blur: 10. Spread: -0.

3. Save the style as Blue Outer Shadow.

Your artboard should look something like this:
Lunacy tutorial: Neumorphism in UI design: Creating a colored round button

Creating radio buttons

1. Add a 50X50px ellipse above the buttons from the previous step.

2. Select the ellipse, and apply the Grey Inner Shadow style to it.

3. Adjust the inner shadow settings. They should be as follows:

                              Fill             Opacity      X    Y    Blur    Spread
Light shadow   #FFFFFF      50%          -8   -8    10      -2
Dark shadow    #757F8A      50%            8     8    10      -2

4. Save the new style and name it, say, Grey Inner Shadow Ellipse.

5. Create two more duplicates of the ellipse and arrange the shapes as shown below.

Lunacy tutorial: Neumorphism in UI design: Creating a colored round button-2

Let’s create an unselected radio button:

1. Create a smaller (30x30px) ellipse within the middle duplicate from the previous step.

2. Select both ellipses and align them: press Alt+H (align horizontally), then press Alt+V (align vertically).

3. Select the inner ellipse and apply the following styling:

Fill. Linear gradient: #FAFAFA –> #EBEDF0
Border. Inside, 8px, Linear gradient: #F2F2F2 –>#BFCAD4
Inner shadow. Color: #757F8A, Opacity: 50%, X: 4; Y: 4; Blur: 9, Spread: 0

4. Save the style of the inner ellipse as Grey Inner Shadow Ellipse 2.

5. Select both ellipses and press Ctrl+G to group them.

Now, we’re going to create a selected radio button. For this:

1. Create a 30*30px ellipse within the second duplicate.

2. Select both ellipses and align them: press Alt+H (align horizontally), then press Alt+V (align vertically).

3. Select the inner ellipse and apply the following styling:

Fill. Linear gradient: #59ADFF –> #83C2FF.
Inner shadow. Color #757F8A, Opacity: 50%, X: 5. Y: -5. Blur: 10. Spread: -3.

4. Save the new style as Blue Inner Shadow.

5. Select both ellipses and press Ctrl+G to group them.

Here’s what we’ve got:
Lunacy tutorial: Neumorphism in UI design: Blue Inner Shadow

Some more buttons and fields

1. Enable the rectangle tool and draw a 150x50px rectangle.

2. Set the rectangle’s corner radiuses to 20.

3. Apply the Grey Outer Shadow style.

4. Create a duplicate of the rectangle and apply the Grey Inner Shadow style to it.

Lunacy tutorial: Neumorphism in UI design: Some more buttons and fields

5. Add copies of these two rectangles to the opposite side of the artboard.

Lunacy tutorial: Neumorphism in UI design: Some more buttons and fields-2

Creating toggles

1. Create a 100X50px rectangle.

2. Select the rectangle and set its corner radiuses to 30.

3. Apply the Grey Inner Shadow style to it.

4. Add a 50×50 ellipse.

5. Apply the Blue Outer Shadow style to the ellipse.

6. Select both shapes and press Ctrl+G to group them.

Lunacy tutorial: Neumorphism in UI design: Creating toggles
Now let’s create a disabled toggle.

1. Duplicate the enabled toggle.

2. Move the slider to the opposite side.

3. Apply the Gray Outer Shadow style to it.

Lunacy tutorial: Neumorphism in UI design: Creating toggles

Creating a slider

1.Now let’s create a simple slider without a handle.

2. Create a vertical rectangle (50X200 px).

3. Select the rectangle and set its corner radiuses to 60.

4. Apply the Grey Inner Shadow style to the rectangle.

5. Create a 50x100px rectangle inside the one created during the previous steps.

6. Apply the Blue Inner Shadow style to the second rectangle.

7. Select both rectangles and press Ctrl+G to group them. The slider is ready.

Lunacy tutorial: Neumorphism in UI design: Creating toggles: Creating toggle

8. Create two more duplicates of the slider. To visualize different states of the slider:

In duplicate 1, delete the inner rectangle.
In duplicate 2, adjust the height of the inner rectangle.
Lunacy tutorial: Neumorphism in UI design: Creating a slider-2

Creating a slider with a handle

1. Select the first slider that we’ve created at the previous step and duplicate it.

2. Rotate the duplicate to 90°.

3. Adjust its size to 200x25px.

4. Duplicate the unselected radio button that we’ve created earlier and place it in the middle of the slider. It also looks great as a handle, huh?

Lunacy tutorial: Neumorphism in UI design: Creating a slider with a handle

5. Create two more duplicates of the slider as shown below.

Lunacy tutorial: Neumorphism in UI design: Creating a slider with a handle-1

Final strokes

And finally, add some text and icons to the buttons and text fields:

  • For the texts I used the following settings: Inter, Semi Bold, 18, #2A2A2A (buttons), #9A9A9A (fields).
  • The icons are from the Lunacy built-in gallery. I used the IOS Filled style.

And here is the final result:
Lunacy tutorial: Neumorphism in UI design: Final strokes

Check out the other Lunacy tutorials to upgrade your skills and learn how to design a:

Don’t forget to try collaboration in Lunacy starting with version 7.

Follow the Lunacy team on social media and stay tuned for new tutorials:

About the author: Julia G, a wonderful creature responsible for QA and SMM at the Lunacy team.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Background Remover Background Remover, AI-based online tool for removing background from any photo
Mega Creator Mega Creator, online tool for creating visual content from pre-made elements
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit