Gradient Maker

A lightweight, zero-dependency TypeScript library for generating cross-browser CSS gradient strings.

Features

• 🚀 Zero Dependencies: Pure TypeScript logic.
• 🎨 Cross-Browser Support: Generates standard, -webkit-, -moz-, and legacy IE filter strings.
• 🛡️ Type Safe: Fully typed with TypeScript.
• 📦 Modern Exports: Supports ESM and CommonJS.

Installation

npm install @nyanxx/gradient-maker
# or
pnpm add @nyanxx/gradient-maker
# or
yarn add @nyanxx/gradient-maker

Quick Start

import { gradientMaker } from '@nyanxx/gradient-maker';

const result = gradientMaker({
  type: 'linear',
  rotation: 135,
  colors: [
    { color: '#FB6947', position: 0 },
    { color: '#F89B29', position: 100 }
  ]
});

console.log(result.standard); 
// "background: linear-gradient(135deg, hsla(11, 96%, 63%, 1) 0%, hsla(33, 94%, 56%, 1) 100%);"

console.log(result.full); 
// Returns all versions (fallback, standard, moz, webkit, filter) joined by newlines.

API Reference

gradientMaker(config: GradientMeta): GradientOutput

The main function to generate gradient strings.

GradientMeta (Input)

| Property | Type | Description | | :--- | :--- | :--- | | colors | ColorPoint[] | Array of { color: string, position: number } | | type | 'linear' \| 'radial' | Gradient shape | | rotation | number | Angle in degrees (linear only) |

GradientOutput (Output)

| Property | Description | | :--- | :--- | | standard | W3C Standard CSS | | webkit | Chrome/Safari prefix | | moz | Firefox prefix | | filter | Legacy IE Filter | | fallback | Solid color fallback | | full | All of the above joined |

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Nayan