HTML Academy
Gradient Direction
Linear Gradients3/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
Gradients at an Angle
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Diagonal Gradients

Gradients can be set diagonally, from corner to corner. To do this, you need to combine top, bottom and left, right. For example, a gradient that goes from the bottom left to the top right corner:

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

Here are some examples of diagonal gradients with the colors yellow, green:

to right top
to right bottom
to left bottom
to left top

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Diagonal Gradients</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 top  from right to bottom
    2. to the upper left from the bottom right
    3. from the bottom left to the upper right
    4. to the bottom left from the upper right

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

    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.