Shadows and elevation


So I’m looking to do some shadow magic and was wondering what a good / fast approach would be to have an adjustable ‘elevation’/drop shadow system e.g. Material elevation type:

All tips welcome!


You can get a similar look by creating two rectangles, one for the shadow, and one for the actual rectangle (or an image if that’s what you need). This also works well for circles.

The “shadow” rectangle is created by lowering the opacity, setting it to black, setting the corner radius, and most importantly, the blur length.

By adjusting or animating the opacity, corner radius and the blur length, you can get a shadow that’s similar to a material shadow.

If you need an offset use position x and y.

Another approach is to create a shadow in photoshop/sketch, export it as a png, and then scale it up and down while adjusting opacity, to simulate different elevations. More elevation -> less opacity, higher scale factor. That’s the most efficient approach when it comes to rendering performance, but can be a bit inflexible depending on how much you want to animate it.