Easing Gradients

Fixes the hard edge on a CSS gradient by easing the colour mix, with an editor plus PostCSS and Sketch plugins

Tier B · UsefulToolGeneratorReferencelarsenwork.com

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License: Unknown
Pricing: Free
Framework: Not applicable
Styling: Vanilla CSS
Distribution: Web app / online tool, npm package, GitHub repository
Platform: Web
Content type: Code, Design tokens / theme files, Images / textures / backgrounds
Agent readiness: Copy-paste ready code, CLI installable
Accessibility: Not applicable
Maturity: Stable
Pricing detail: Free. The editor and both plugins carry no charge and need no account.

Components it ships

Gradient Background

Notable for

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

Provenance

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.

Also in Textures, Backgrounds & Assets

larsenwork.comTier B