HTML Academy
  • HTML Academy
  • Courses
  • Tutorials
  • Courses
  • Tutorials
  • Sign up
  • Log in
  • Home
  • Interactive courses
  • Advanced styling
  1. Introduction to Backgrounds 0/16
  2. Shadow Play 0/17
  3. Linear Gradients 0/23
  4. CSS filters 0/14
  5. Text Formatting 0/26
  6. Frames and Backgrounds 0/33

Chapter 2: Shadow Play

15 tasks, 2 challenges

Let's take a look at the process of creating shadows using CSS. We will cover the box-shadow property bit by bit, learn how to use multiple shadows, and explore some advanced shadowing techniques.

Start
1. The box-shadow Property Task
2. Horizontal Shadow Offset Task
3. Vertical Shadow Offset Task
4. Shadow Feathering Task
5. Stretching the Shadow Task
6. Feathering + Stretch Task
7. Shadow Color Task
8. Inner Shadow Task
9. Challenge: Dim Shadows Challenge
10. Semi-Transparent Shadow Task
11. Casting a Shadow Only from One Side Task
12. Multiple Shadows Task
13. Multiple Borders for One Element Task
14. Shadow Art – 1 Task
15. Shadow Art - 2 Task
16. Shadow Art - 3 Task
17. Challenge: The Foreboding Shadows Challenge

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.

We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.