Easing Gradients
Fixes the hard edge on a CSS gradient by easing the colour mix, with an editor plus PostCSS and Sketch plugins
A linear CSS gradient usually shows a hard edge where it starts or ends. Easing Gradients explains why and fixes it: control the colour mix with an easing function rather than letting it run linearly. The clearest case on the page is the one designers hit most often. A gradient laid under text or interface elements exists to raise contrast, and it should be invisible. A linear one is not, because the eye catches its boundary. An eased one carries the same amount of black and disappears. Three things ship beside the explanation: an editor for generating the gradient, a PostCSS plugin so it happens at build time, and a Sketch plugin. It is a CSS Working Group proposal, so the technique is a stated direction for the platform and not only a trick. The page publishes no llms.txt and no sitemap.
Reach for this whenever a gradient sits under text. That is the exact case the page addresses: a scrim meant to raise contrast should be invisible, and a linear gradient never is. Use the PostCSS plugin rather than pasting stops when the project has a build step. It generates the eased gradient at build time, so the source stays readable. Know that it is a CSS Working Group proposal. The technique is a stated direction for the platform, so a hand-rolled version today is likely to be replaced by native syntax later.
Why it is here. The hard edge on a scrim gradient is one of the most common and least noticed defects in interface work, and this page names the cause and ships three ways to fix it.
- fixes the hard edge on a CSS gradient
- eases the colour mix instead of the position
- editor plus PostCSS and Sketch plugins
- a CSS Working Group proposal
- aimed at scrims under text
Verified 2026-08-30. HTTP 200. https://larsenwork.com/easing-gradients/ 200, 98 KB; the page reads "Easing Gradients — Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions. It's currently a CSSWG proposal and you can use the Editor, PostCSS plugin, Sketch plugin", and the examples section reads "Gradients under text/ui are used to increase contrast but should often be as invisible as possible. The examples below have the same amount of black". /llms.txt and /sitemap.xml both 404 and return the same body as a nonsense path. Listed under Web Utility on designengineer.tools as Easing Gradients.
