What's a CSS box shadow?
Using the box-shadow
property, you can add a CSS box shadow effect for a selected element:
CSS shadow syntax
The syntax for box-shadow
is as follows:
box-shadow: h-shadow v-shadow blur spread color;

Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

Pros Main Features
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Property values
Value | Description | |
---|---|---|
none | Default | No CSS box shadow is displayed. |
h‑shadow | Required | The horizontal offset. Use a positive value for the right side of the box and a negative value for the left. |
v‑shadow | Required | The vertical offset. Use a positive value for the area below the box and a negative value for the area over the box. |
blur | Required | The level of blur. 0 represents a sharp CSS box shadow. Higher number means more blur in a bigger area. |
spread | Optional | The size of the CSS box shadow. Use a positive value for bigger size and a negative value for smaller size. |
color | Optional | The color of the CSS box shadow. Black by default. Specify a custom one using color names, RGB, RGBA, HEX, HSL or HSLA values. |
Tip: you can use the
inset
keyword to change the outset CSS shadow to an inner shadow.
Browser support

Chrome
10+

Edge
12+

Firefox
4+

IE
9+

Opera
10.5+

Safari
5.1+
Mobile browser support

Chrome
18+

Firefox
4+

Opera
All

Safari
5+