# css-gradient-parser

> a css gradient parser

Latest version **0.0.18** (published 2025-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-gradient-parser
pnpm add css-gradient-parser
yarn add css-gradient-parser
bun add css-gradient-parser
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2025-08-10 |
| First published | 2023-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 42.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lynnnnnnxx |
| Maintainers | lynnnnnnxx |

## Links

- npm: https://www.npmjs.com/package/css-gradient-parser
- npm.io page: https://npm.io/package/css-gradient-parser

## Recent versions

- 0.0.18 (latest) — 2025-08-10
- 0.0.17 — 2025-07-29
- 0.0.16 — 2023-10-15
- 0.0.15 — 2023-10-14
- 0.0.14 — 2023-10-14
- 0.0.13 — 2023-10-14
- 0.0.12 — 2023-10-14
- 0.0.11 — 2023-10-14
- 0.0.10 — 2023-10-14
- 0.0.9 — 2023-10-14
- 0.0.8 — 2023-10-14
- 0.0.7 — 2023-10-14
- 0.0.6 — 2023-10-14
- 0.0.5 — 2023-10-14
- 0.0.4 — 2023-10-14
- … 2 more at https://npm.io/package/css-gradient-parser/versions

## README

<p>
  <a href="https://npmjs.com/package/css-gradient-parser"><img src="https://img.shields.io/npm/v/css-gradient-parser.svg" alt="npm version"></a>
  <a href="https://npmjs.com/package/css-gradient-parser"><img src="https://img.shields.io/npm/dm/css-gradient-parser.svg" alt="npm downloads"></a>
</p>

# css-gradient-parser

This lib intends to give a parser for [satori](https://github.com/vercel/satori) so that we can handle more gradient features


## API
### `parseLinearGradient`
```ts
interface LinearOrientation {
  type: 'directional' | 'angular'
  value: string
}

interface LinearResult {
  orientation: LinearOrientation
  repeating: boolean
  stops: ColorStop[]
}
```

### `parseRadialGradient`
```ts
type ValueType = 'keyword' | 'length'

interface RadialResult {
  shape: 'circle' | 'ellipse'
  repeating: boolean
  size: {
    type: ValueType
    value: string
  }[]
  position: {
    x: { type: ValueType, value: string }
    y: { type: ValueType, value: string }
  }
  stops: ColorStop[]
}
```

### `parseConicGradient`
```ts
type RectColorSpace = 'srgb' | 'srgb-linear' | 'lab' | 'oklab' | 'xyz' | 'xyz-d50' | 'xyz-d65'
type PolarColorSpace = 'hsl' | 'hwb' | 'lch' | 'oklch'
type HueInterpolationMethod = `${'shorter' | 'longer' | 'increasing' | 'decreasing'} hue`

interface ConicGradient {
  angle: string
  repeating: boolean
  position: string
  color?: Color
  stops: ColorStop[]
}

type Color = {
  space: RectColorSpace | PolarColorSpace
  method?: HueInterpolationMethod
}
```

- [x] linear-gradient
- [x] radial-gradient
- [x] conic-gradient
- [x] repeating-linear-gradient
- [x] repeating-radial-gradient
- [x] repeating-conic-gradient


## LICENSE

[MIT](./LICENSE)

---
_Source: https://npm.io/package/css-gradient-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._