Material Design

Shadow elevations

A shadow elevation specifies the degree of shadow intensity to be displayed beneath an object. Higher shadow elevations have greater shadow intensities, akin to raising an object above a surface resulting in a more prominent, albeit more diffuse, shadow. This component provides commonly used Material Design elevations for components.


Design & API Documentation


Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/ShadowElevations'

Then, run the following command:

pod install



Before using Shadow Elevations, you’ll need to import it:


import MaterialComponents

class ShadowedView: UIView {

  override class var layerClass: AnyClass {
    return MDCShadowLayer.self

  var shadowLayer: MDCShadowLayer {
    return self.layer as! MDCShadowLayer

  func setDefaultElevation() {
    self.shadowLayer.elevation = .cardResting



#import "MaterialShadowElevations.h"

@interface ShadowedView: UIView


@implementation ShadowedView

+ (Class)layerClass {
  return [MDCShadowLayer class];

- (MDCShadowLayer *)shadowLayer {
  return (MDCShadowLayer *)self.layer;

- (void)setDefaultElevation {
  self.shadowLayer.elevation = MDCShadowElevationCardResting;