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;

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

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
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

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!