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 3: Linear Gradients

19 tasks, 4 challenges

We will learn what linear gradients are and how you can use them to create interesting decorative effects. We will explore the syntax of the linear-gradient function, pick up some cool tricks, and practice creating complex ornaments using gradients.

Start
1. Hello, linear-gradient! Task
2. Gradient Direction Task
3. Diagonal Gradients Task
4. Gradients at an Angle Task
5. Diagonals vs. Degrees Task
6. Challenge: Application Icons Challenge
7. Uniform Multicolor Gradient Task
8. Color Proportions and Color Stops Task
9. Sharp Color Transitions Task
10. Pseudo-Columns on Gradients Task
11. Challenge: Flags Challenge
12. Color Transitions in px Task
13. Semi-Transparent Gradients Task
14. Repeating Linear Gradient Task
15. Creating a Complex Background – Part 1 Task
16. Creating a Complex Background – Part 2 Task
17. Creating a Complex Background – Part 3 Task
18. Let’s Create a Complex Background – Final Step Task
19. Buttons – Part 1 Task
20. Buttons – Part 2 Task
21. Buttons – Part 3 Task
22. Challenge: Ornament Made of Shurikens Challenge
23. Challenge: Satellites 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.