Установка

Требования

Окружение	Минимальная версия
Node.js	18+
vue	3.0.0+ (опционально — только для css-magic-gradient/vue)
react	17.0.0+ (опционально — только для css-magic-gradient/react)

Основная точка входа (css-magic-gradient) никогда не требует vue или react — только подпути /vue и /react, и только когда вы их реально импортируете.

Установка

npm install css-magic-gradient

Опциональные peer-зависимости — устанавливайте только то, что нужно:

npm install vue@>=3.0.0    # требуется для хуков Vue
npm install react@>=17.0.0 # требуется для хуков React

Быстрый старт

Обычный TypeScript:

import { createLinearGradient, sunsetGradient } from 'css-magic-gradient'

const gradient = createLinearGradient('#3498db', { direction: 'to right' })
// → 'linear-gradient(to right, #5faee3, #3498db)'

document.body.style.background = sunsetGradient

Vue 3:

<script setup lang="ts">
import { ref } from 'vue'
import { useLinearGradient } from 'css-magic-gradient/vue'

const color = ref('#3498db')
const gradient = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
</script>

<template>
  <div :style="{ background: gradient }">Hello</div>
</template>

React:

import { useState } from 'react'
import { useLinearGradient } from 'css-magic-gradient/react'

export function Demo() {
  const [color, setColor] = useState('#3498db')
  const gradient = useLinearGradient(color, { direction: 'to right' })

  return <div style={{ background: gradient }}>Hello</div>
}