All you ever needed to know about gradients 📚

Time for a knowledge bomb. The resources on this page get into the nitty gritty details about gradients, from mathematical proofs to the psychology of emotional responses from colors. There's more information here than you'll most likely need, but this page will always be here as an up-to-date reference.

Dig Deep into CSS Linear Gradients

For a fascinating deep dive into the mathematical concepts involved in creating the gradient spec, check out this superb article by CSS guru Ana Tudor. With visual diagrams written in code, she breaks down exactly how linear gradient color stops are positioned and shows the box extents of a rotated gradient.

Learn More
Deep dive linear gradients

How Are Gradient Paths Calculated?

Into algorithms and rgba color spaces? Get super technical with this insightful Stackoverflow post describing how CSS Gradients are exactly the same as the W3C canvas spec except for one small difference. At the end there's a visual code sample examining the different transparency operations.

Learn More
Gradient calculation

Super Smooth Linear Gradients

As you're using our tool to create gradients, you might notice a harsh line when certain colors aren't quite blending together. This article describes a technique similar to one you'd use in animation, where you ease into each color stop helping to seamlessly blend one to another.

Learn More
Easing linear gradients

Read the W3C Gradient Docs

Why not go straight to the source? Well for one the documenation can be a bit confusing, and it's not written for a general audience. But in reality if you're looking to really, deeply understand what you can do with css gradients, the official docs are the best way to get that information.

Learn More
W3c gradient

MDN Gradient Docs

Mozilla as they are wont to do has taken the previously mentioned W3C specification and made it visual and interactive. Within a demo of explaining radial gradients, you can play with the code directly on the page! If the W3C docs scared you away, check this resource out instead.

Learn More
Mdn gradients

Additional Design Resources