Do you really understand CSS linear-gradients?
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A deep dive into how CSS linear-gradients actually work under the hood. Covers the gradient box, gradient line, angle calculation (including how corner keywords depend on box dimensions), gradient line length formula, and the rules for distributing color stops — including positioned, unpositioned, out-of-order, and mixed stops.
Table of contents
The gradient boxThe gradient lineThe gradient angleThe gradient line lengthColor stopsToolingSort: