Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
box-shadow
property
styling

What is the CSS box-shadow property?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The box-shadow property is used to create a shadow effect around an HTML element.

svg viewer

The box-shadow property can have the values below. These values define the shadow’s characteristics:

value description
h-offset The horizontal offset of a shadow. A positive value creates a shadow on the right, and a negative value creates a shadow on the left.
v-offset A positive vertical offset creates a shadow below the box, and a negative offset creates one above the box.
blur The blur radius of the shadow.
spread The size of the shadow.
color The color of the shadow.
inset Changes the shadow from an outer shadow to an inner shadow.

Syntax

These values take the following order in the syntax:

box-shadow: h-offset v-offset blur spread color inset;

Code

RELATED TAGS

css
box-shadow
property
styling
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring