Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

Box Shadow

The CSS box-shadow property is employed to add one or more shadows to an element.

Specify a Horizontal and a Vertical Shadow

In its basic application, you define a horizontal and a vertical shadow. The default shadow color is the current text color.

A <div> element with a box-shadow

Example

Define a horizontal and a vertical shadow.

div {
box-shadow: 10px 10px;
}

Specify a Color for the Shadow

The color parameter specifies the shadow’s color.

A <div> element with a lightblue box-shadow

Example

Define a color for the shadow.

div {
box-shadow: 10px 10px lightblue;
}

Add a Blur Effect to the Shadow

The blur parameter determines the extent of blur radius. Increasing the number results in a more blurred shadow effect.

A <div> element with a 5px blurred, lightblue box-shadow

Example

Incorporate a blur effect into the shadow.

div {
box-shadow: 10px 10px 5px lightblue;
}

Set the Spread Radius of the Shadow

The spread parameter specifies the spread radius. Positive values expand the shadow’s size, while negative values reduce it.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Example

Adjust the spread radius of the shadow:

div {
box-shadow: 10px 10px 5px 12px lightblue;
}

Set the inset Parameter

By incorporating the inset parameter, you can transform the shadow from an outer shadow (outset) to an inner shadow.

A <div> element with a blurred, lightblue, inset box-shadow

Example

Include the inset parameter.

div {
box-shadow: 10px 10px 5px lightblue inset;
}

Add Multiple Shadows

An element is capable of having multiple shadows applied to it.

Example

div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Cards

The box-shadow property can also be utilized to design paper-like cards.

Example

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}