HTML Academy
Hello, linear-gradient!
Linear Gradients2/23
Back to the list of tasks
  • 1. Hello, linear-gradient!
  • 2. Gradient Direction
  • 3. Diagonal Gradients
  • 4. Gradients at an Angle
  • 5. Diagonals vs. Degrees
  • 6. Challenge: Application Icons
  • 7. Uniform Multicolor Gradient
  • 8. Color Proportions and Color Stops
  • 9. Sharp Color Transitions
  • 10. Pseudo-Columns on Gradients
  • 11. Challenge: Flags
  • 12. Color Transitions in px
  • 13. Semi-Transparent Gradients
  • 14. Repeating Linear Gradient
  • 15. Creating a Complex Background – Part 1
  • 16. Creating a Complex Background – Part 2
  • 17. Creating a Complex Background – Part 3
  • 18. Let’s Create a Complex Background – Final Step
  • 19. Buttons – Part 1
  • 20. Buttons – Part 2
  • 21. Buttons – Part 3
  • 22. Challenge: Ornament Made of Shurikens
  • 23. Challenge: Satellites
Diagonal Gradients
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Gradient Direction

The directions of the gradient are specified using the keywords: top, bottom, left, right.

The direction of the gradient is specified right before the color list and includes the particle to. It has been added to the syntax to improve readability and clarity:

background-image: linear-gradient(to right, yellow, green);

And we can immediately understand that this means: “Yellow-green gradient from left to right”.

Here are examples of different gradient directions with the colors yellow, green:

to right
to left
to bottom
to top

Now practice setting different directions for the gradients yourself.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Gradient Direction</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <h1>Hello, linear-gradient!</h1> </div> </body> </html>
CSS
html, body { margin: 0; height: 100%; } .content { height: 100%; background-color: yellow; background-image: none; /* Gradient colors: yellow, green */ } h1 { margin: 0; padding-top: 250px; text-align: center; font-size: 30px; font-family: "Georgia", serif; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    For .content, set a yellow-green gradient with the following directions:

    1. from left to right
    2. from right to left
    3. from top to bottom
    4. from bottom to top

    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.