Gradient overlays (scrims) are a pattern employed to preserve legibility of text, or to suggest further content out-of-bounds. These utilities allow you to produce an eased gradient overlay, using your existing theme values: scrim-b-48 scrim-orange-500.

• Gradient easing subdues appearance of hard edges and luminance banding
• Multiple edges can be specified with independent sizes
• Use theme scales and arbitrary values for color and distances
• Allows the use of opacity modifiers without stacking conflicts

Installation

Simply install and register the plugin, according to the version of tailwindcss used.

npm i -D tailwindcss-scrim-gradients

Tailwind v4

/* global.css */
@plugin "tailwindcss-scrim-gradients";

Tailwind v3

// tailwind.config.js
module.exports = {
	theme: {
		// ...
	},
	plugins: [
		require('tailwindcss-scrim-gradients'),
		// ...
	],
};

Usage

Combine color and distance utilities to generate a scrim.

<div class="scrim-b-12 dark:scrim-black/70" />

Shorthand utilities can be applied, and overridden on any edge.

<div class="scrim-12 scrim-b-1/4" />

Caveats

This plugin uses ::after to position the overlay, and cannot be used with the respective Tailwind pseudo-element variants. This also means that the containing element will default to relative positioning.

Gradient stacking is achieved through mask-image, which has good browser support when used with vendor prefixing. If you use Tailwind, you can use this.