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.
How Are Gradient Paths Calculated?
Into algorithms and RGBA color spaces? Get super technical with this insightful Stack Overflow 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.
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.
Read the W3C Gradient Docs
Why not go straight to the source? Well for one the documentation 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.
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 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.
Additional Design Resources
Cool Backgrounds is a large collection of the newest wallpaper images for you desktop, laptop or mobile phone. Customize with multiple colors and types to suit your style.
