Effects

Shadows, Gradients and more.

3 Sections

Introduction

Visual effects such as shadows, gradients, and blend modes are detailed out in the section.

Shadows

Shadows are used in many cases to emphasize visual elements. In some cases, we use shadows as feedback for an event like ‘hover’ or to indicate the focus.

Primary Box Shadows

For the First layer (the element comes directly over a fluid background with color or background image) of any block element, we use primary box shadows.

  1. Normal View
  2. Hoverd View
/* Primary Shadows Normal View */
box-shadow: 5px 10px 30px 0 rgba(0,0,0,0.05);

/* Primary Shadows Hoverd View */
box-shadow: 5px 10px 10px 0 rgba(0,0,0,0.05);

 

Blend Modes

When we deal with Background images, we mix it with gradients extracted from brand colors and we use Blend Modes to mix both gradient and image together producing something new. Unifying the blend mode cases will help us represent the brand effectively consistently.

Primary Gradient, Multiply

It is the main case and the most used one. we use the brand gradient (1) with a black and white photo, mixing them together by Multiply. a clear example is the home page featured background.

/* Primary Gradient */
background-image: linear-gradient(229deg, #4ED1D6 75%, #675089 0%);

 

A sample of what we get: