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