How to Create Isometric Illustration of Mobile Phone in Gravit Designer

Follow my blog with Bloglovin
Isometric is a type of axonometric (parallel projection), where an axis is inclined at the angle of 30deg to the horizontal plane.The main advantage of isometric drawings is that you are able to present an object into three-dimensional space without involving perspective. It makes your object less realistic, but it also became easy to render and whats more important, easy to measure. To learn more about isometric projection, please read my definitive guide to isometric projection.

In today’s tutorial, you will learn how to create modern isometric compositions in Gravit Designer. Let’s start.

Isometric illustration in gravit designer

New Document

Starting drawing in isometric projections in Gravit Designer is as easy as pie. Start your New Document and head on top the Document Panel. I am using default 20px grid

Isometric grid in Gravit


Create a New Document at 1140x900px size. Grab a Rectangle Tool and cover the entire canvas with the Rectangle. Head on to the Fill Color Panel and choose the Linear Gradient Option. Click at the middle of the slider to add a third gradient stop.

Background Gradient

Set these colors to the gradient stops starting from left one:

  • #361B68
  • #5761AC
  • #D897F4

Gradient of the Background rectangle

Lock this layer on the Layers Panel.

Design an Isometric Phone

Come over the Document Panel and click at the Isometric Grid Radio Button to show an isometric grid. Head on to the Tools Panel and find a Magnet Icon. Click to show the Snapping Options. Make sure you have Snapt To Grid and Snap To Full Pixels selected.

Isometric grid option

Snap to Grid and full pixel

Following isometric axis draw a rectangle at the size of 632x365px using Pen Tool. Change a fill color to Linear Gradient and set these colors starting with the left gradient stop:

  • #4452BD
  • #D897F4

Create an isometric phone in Gravit Designer

With a Subselect Tool select all corners one by one. Head on to the Appearance Panel and set a Corner Radius to 8px by typing inside a Corner Input Field.

Round Corners in Gravit

Add a Dimension

To make the 3d like effect in Gravit I usually use a Long Shadow Effect, that we can find under the Effects>More>Shadow. In opened panel set these values:

  • Angle =-90deg
  • Length= 16px
  • Opacity=100%
  • Fade=None

Long Shadow Effect Settings

Head on to the color and choose a Linear Gradient. Apply these colors to the Gradient Stops:

Long Shadow gradient

  • #251A5E at the beginning
  • #D897F4 at the position of 70%
  • #590E59 at the position of 100%

Create a Screen

Using the Pen Tool draw another rectangle at the size of 500x288px. Place it to denote the phone screen. Head on to the Fill Color Panel and set up the Linear Gradient:

  • #44A9BD on the left
  • #DEF8FF on the right

Phone Screen Gradient

Screen Light

Make a duplicate of the screen using a shortcut CTR/CMD+SHIFT+D. Select an original object and head on to the Effects Panel. Choose Blur and set the value of the Radius to 30px.

Blurry Screen

Grab the Pen Tool and draw a hexagon to cover the screen. Apply a Linear Gradient as shown on the picture:

  • #1C80BF on the top
  • #8BDEF4 on the bottom

Light screen

Navigate to the Effect>Other>Adjust and select the Overlay Effect. You can learn more about it in this tutorial. In opened panel set the value of Blend to “On”. Enter the Color Dialog Box and choose a Linear Gradient Option. Arrange gradient stops as shown on the picture.

Overlay effect in Gravit Designer

Phone Button and Speaker

Create a circle that occupies 50px and place it on the isometric grid axis. Gravit Designer has an ability to snap circles into the Isometric Grid.

Apply a gradient to button

Couple of Effects

To make a button look like a button, let’s add a couple of effects:

  1. Inner Shadow with these options:
    • Color: #67BBFF
    • X= -2
    • Y=-1
    • Blur=2
    • Opacity: 30%
  2. Inner Glow ( Effects>More>Other>Inner Glow ). Use these parameters:
    • Color: #241146
    • Radius: 3
    • Intensity: 2

Inner shadow and Inner glow


Draw a line a with the width of 50px placing it to the top of the phone to denote a speaker.

advanced Stroke options in Gravit

Delete the fill color and set a Stroke Weight to 4px.

Head on to the Advanced Stroke Options and set the Ends to Round.


Go the Fill Color Panel and choose a Linear Gradient. Apply these colors to the Gradient Stops starting from the left one:

  1. #825FAA
  2. #393A9F

Gradient of the speaker

Push behind the light


With this shape still selected head on to the Layers Panel and change a stacking order by pushing it down and behind the Screen Light layer.

Create a Reflection

Gravit Designer has a built-in Reflection Effect, but, unfortunately, it won’t work with isometric drawings.

We need to create a custom one by making a duplicate of the Phone Body layer, that we created in the Second Step. So, use the Clone Command via the shortcut Ctrl/Cmd+Shift+D and head over the Edit>Clone. Select an original layer and head on to the Long Shadow Effect Panel. Decrease the opacity of the Long Shadow.

Opacity of The long shadow effect

Keep it selected and apply an Overlay Effect by going to Effects>Adjust>Overlay. To use this Effect as an Opacity mask turn the Blend checkbox on.

Overlay effect in Gravit

Lastly, adjust the gradient of the Overlay effect as shown in the picture.


We are done. Follow the same principles to add the play icon that is hanging over the phone. If you enjoyed the article be sure to subscribe to my Youtube channel and join my mailing list on to receive more Gravit Designer tips, tricks, and freebies. Have a great day.

join Gravit tutorials

Gravit Designer tutorials facebook community

Find a solution for every Gravit challenge

Join group

One thought on "How to Create Isometric Illustration of Mobile Phone in Gravit Designer"

  1. Isometric illustrations have become very popular in web design lately, so tutorials like that one are very useful. I’m gonna try it however I’m not sure whether my skill is sufficient…

Leave a Reply

Your email address will not be published. Required fields are marked *

join our newsletter

Subscribe to the weekly newsletter: