PostCSS Solid-Color Image

This PostCSS plugin lets you use a solid color as an image, following the CSS Images specification.

.box {
  background: image(red);
}

/* becomes */

.box {
  background: linear-gradient(red 0 0);
}

❌ Deprecated

The dedicated Deno version of this module is deprecated and will not receive any updates anymore. Please use the following instead:

import colorImage from "npm:postcss-color-image@VERSION";

Usage

import postcss from "npm:postcss";
import colorImage from "https://deno.land/x/postcss_color_image@5.0.1/mod.js";

await postcss([colorImage]).process(YOUR_CSS);

Options

compat: true

Instead of adding a double-position color stop, duplicate the color in the output gradient for wider browser support.

.box {
  background: linear-gradient(red, red);
}

preserve: true

Keep the original CSS declaration alongside the transformed one.

.box {
  background: linear-gradient(red 0 0);
  background: image(red);
}