# postcss-double-position-gradients > Use double-position gradients in CSS Latest version **7.0.4** (published 2026-09-06) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install postcss-double-position-gradients pnpm add postcss-double-position-gradients yarn add postcss-double-position-gradients bun add postcss-double-position-gradients ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 7.0.4 | | Published | 2026-09-06 | | First published | 2018-10-28 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 3 | | Unpacked size | 9.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1053 | | Author | Jonathan Neal | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | color, conic, css, double, gradients, linear, position, postcss, postcss-plugin, radial, repeating, stop, syntax | ## Links - npm: https://www.npmjs.com/package/postcss-double-position-gradients - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/postcss-double-position-gradients ## Dependencies (3) - [@csstools/utilities](https://npm.io/package/@csstools/utilities.md) ^3.0.0 - [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0 - [@csstools/postcss-progressive-custom-properties](https://npm.io/package/@csstools/postcss-progressive-custom-properties.md) ^5.1.3 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 7.0.4 (latest) — 2026-09-06 - 7.0.3 — 2026-08-15 - 7.0.2 — 2026-06-28 - 7.0.1 — 2026-05-13 - 7.0.0 — 2026-01-14 - 6.0.4 — 2025-09-21 - 6.0.3 — 2025-08-22 - 6.0.2 — 2025-05-27 - 6.0.1 — 2025-04-19 - 6.0.0 — 2024-08-03 - 5.0.7 — 2024-07-07 - 5.0.6 — 2024-03-31 - 5.0.5 — 2024-03-13 - 5.0.4 — 2024-02-19 - 5.0.3 — 2023-12-15 - … 19 more at https://npm.io/package/postcss-double-position-gradients/versions ## README # PostCSS Double Position Gradients [PostCSS][postcss] [NPM Version][npm-url] [Discord][discord]

[Baseline Status][css-url] [CSS Standard Status][css-url] [PostCSS Double Position Gradients] lets you use double-position gradients in CSS, following the [CSS Image Values and Replaced Content] specification. ```css .linear-gradient { background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } /* becomes */ .linear-gradient { background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } ``` ## Usage Add [PostCSS Double Position Gradients] to your project: ```bash npm install postcss-double-position-gradients --save-dev ``` Use [PostCSS Double Position Gradients] to process your CSS: ```js const postcssDoublePositionGradients = require('postcss-double-position-gradients'); postcssDoublePositionGradients.process(YOUR_CSS /*, processOptions, pluginOptions */); ``` Or use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssDoublePositionGradients = require('postcss-double-position-gradients'); postcss([ postcssDoublePositionGradients(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` [PostCSS Double Position Gradients] runs in all Node environments, with special instructions for: | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | --- | --- | --- | --- | --- | ## Options ### preserve The `preserve` option determines whether the original double-position gradients should be preserved. By default, double-position gradients are preserved. ```js postcssDoublePositionGradients({ preserve: false }) ``` ```css .linear-gradient { background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } /* becomes */ .linear-gradient { background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg); } ``` ### enableProgressiveCustomProperties The `enableProgressiveCustomProperties` option determines whether the original notation is wrapped with `@supports` when used in Custom Properties. By default, it is enabled. > [!NOTE] > We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. > See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). ```js postcssDoublePositionGradients({ enableProgressiveCustomProperties: false }) ``` ```css :root { --a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } /* becomes */ :root { --a-gradient: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); /* will never be used, not even in older browser */ --a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } ``` [css-url]: https://cssdb.org/#double-position-gradients [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-double-position-gradients [CSS Image Values and Replaced Content]: https://www.w3.org/TR/css-images-4/#color-stop-syntax [PostCSS]: https://github.com/postcss/postcss [PostCSS Double Position Gradients]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients --- _Source: https://npm.io/package/postcss-double-position-gradients · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._