WPDIR
Everything and everyone WordPress

Understanding CSS linear gradient angles… with examples!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #877 Reply
    Nicholas
    Guest

    It’s a little bit wordy but this is one of the best explanations of how CSS gradient angles render in your browser…

    https://patrickbrosset.medium.com/do-you-really-understand-css-linear-gradients-631d9a895caf

    So, to top right doesn’t mean that the gradient line passes through the top-right corner and it doesn’t mean that the gradient angle is 45 degrees either!

    Let’s look at how the gradient line moves when the angle changes in the following animation:

    #878 Reply
    Margaret
    Guest

    gradients are seriously confusing, not just the angles but the syntax keeps changing too.

    #879 Reply
    Olivia
    Guest

    The newer plain language that is now supported like “top to bottom” just made things more confusing yah, now there are multiple ways to create gradient angles instead of a uniform syntax… idk maybe some people like it.

    #888 Reply
    Patricia
    Guest

    this guy’s article is even more insane lol

    https://9elements.com/blog/gradient-angles-in-css/

Viewing 4 posts - 1 through 4 (of 4 total)
Reply To: Understanding CSS linear gradient angles… with examples!