close menu button

Hello there!
Log into the academy:

In order to log into your academy profile, please provide your email and password

Forgot password?

Did you previously use

Don’t have an account yet?

UI design shapes & objects basics: Shadows and Blurs

Shadows, blurs and how they connect to neumorphism ;-)

Welcome to the third part of the UI Design super-basics. This time we’ll cover two of the most commonly used effects — shadows and blurs.


UI design shapes & objects basics

Drop Shadow

Outer shadows (or drop-shadows) are easily the most common effect used in UI. A typical shadow relies on an offset from center (x, y, or both) a blur and an opacity value. In the example above the shadow is moved 20 points down on the Y axis and then blurred on the left side, or left without the blur on the right.

UI design shapes & objects basics

Some tools like 


 also have a “spread” value, which makes the shadow look like a smaller element is casting it.

The most important parts of any shadows are the X, the Y and the Blur. The latter has to be a number larger than 0, while X and Y can also be negative numbers, moving the shadow in practically every direction.

UI design shapes & objects basics

You can also stack shadows by adding more than one to the same object for pretty interesting results. The example below has three shadows in three darker shades of blue, each transposed by 3 points down.

UI design shapes & objects basics


Knowing that we simply have to mention Neumorphism again. This stacking of shadows and negative X and Y values are the core principles necessary for making Neumorphism work.

UI design shapes & objects basics

Natural looking, soft shadows

A natural-looking shadow is one of those elements that can make the biggest impact in a design. The most important part of looking natural is avoiding pure black shadows and using a shadow derived from our primary color instead. Pure black makes the contrast ratio too big to look natural. If you study real-life shadows, you’ll notice they often vary in shade and tone.

UI design shapes & objects basics

The default shadows are often too dark and can overtake the rest of the design.

The best way to fix your shadows is to change them from black (default) to a darker shade of your primary color. In the example above the shadow is a dark purple with decreased opacity.

UI design shapes & objects basics

Inner shadows

Inner shadows are relatively rare in UI. It has the same parameters as a drop shadow, but it appears inside of the object.

They are not as popular because most interfaces are a series of layers stacked on top of one another. In that case, an outer shadow makes sense as it provides the depth. An inner shadow would suggest the object has a hole in it.

UI design shapes & objects basics

The example on the left uses a classic stack of layers, as seen in most interfaces. Adding an inner shadow to any of the layers (right) can result in an illusion of a hole created in the layers. That can break the visual structure of the stack.

The only use-cases of this style are form inputs (both form fields and checkboxes or radio-buttons) and extruded shapes in the Neumorphism method. They can be used to make the objects appear more life-like in some instances but should only be used moderately.

UI design shapes & objects basics

You can achieve this effect by using inner shadows on objects, and reverse the direction of X and Y.

The main issue with Neumorphism is the notion of using inner shadows and extruded shapes as a “selected” state. The perceivable difference between the standard and selected state is so small, that even non-visually impaired users can sometimes completely miss it. This in turn leads to one of the biggest accessibility flaws of Neumorphism.

UI design shapes & objects basics


Most design tools nowadays have a Gaussian type blur that extends the effect in every direction evenly. Its primary value is the radius. The larger it gets, the more prominent the blur effect.

Gaussian blur is the most often used blur type. You can employ it into transitions between screens, or show a bit of realistic depth of field by selectively blurring the background.

UI design shapes & objects basics

The larger the blur value, the more blurry the image — this one should be self explanatory :)

Gaussian blur as a Shadow

UI design shapes & objects basics

This type of blur can also help you generate non-standard, point-shadows under objects. Just blur an ellipse and place it under the object casting the shadow. You can either use it on its own or combine it with a standard drop shadow for an even more unique result.

Background blur

Background blur became popular when Apple started using it in their OS to achieve that behind smoked-glass effect in some screens. An object with this effect applied blurs everything under it.

UI design shapes & objects basics

In this example a square overlay with 90% opacity and a background blur is placed on the right of the image. As you can see the three white dots behave differently when they are placed under an object “casting” a background blur.

Motion blur

A motion blur simulates the movement of an object in a direction defined by the angle value. The blur value works the same as with Gaussian blur here.

UI design shapes & objects basics

Zoom blur

A zoom blur happens when the object becomes blurry from the inside out. It’s often used in photography, but not a great pick for interface design.

UI design shapes & objects basics

In this particular blur type, you can also set the origin of the blur. By moving that point around, you can achieve some interesting effects.

Zoom blur with off center origins

You can also watch me talk about shadows and blurs on video:

The basics of UI design

This concludes our three part series on basics of shapes, objects and effects used in UI design. This has been a part of the free chapters of 📘 Designing User Interfaces Ebook, and you can download these chapters free 🍒 Learn the basics of design in this YouTube playlist:📺 Design Basics!

Liked the article? Share it!

twitter iconlinked in iconfacebook icon

Similar articles

The Red Square Method by Michal Malewicz

The Red Square Method in UI Design

Read article

All you need to know about UI design Shapes and Objects

Read article
borders and fills

UI design shapes & objects basics: fills and borders

Read article