postcss-color-image

Use a solid color as an image in CSS

Usage no npm install needed!

<script type="module">
  import postcssColorImage from 'https://cdn.skypack.dev/postcss-color-image';
</script>

README

PostCSS Solid-Color Image PostCSS

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);
}

Usage

Node.js

Install the npm package:

npm install postcss-color-image

Then import or require it:

import postcss from "postcss";
import colorImage from "postcss-color-image";
// OR
const postcss = require("postcss");
const colorImage = require("postcss-color-image");

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

Deno

Import the module from deno.land/x:

import postcss from "https://deno.land/x/postcss/mod.js";
import colorImage from "https://deno.land/x/postcss_color_image@4.0.0/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);
}