Skip to Content

PeakedGradient

A beautiful, customizable layered gradient peak component for React and Next.js. Perfect for hero sections, backgrounds, and visual accents.

By@mutahharmk• Based on@AliGridsFigma tutorial
GitHubnpm
100
50
50
Color
Base
Generated:
Configuration
<PeakedGradient
  colors={[
    '#B6C9FF',
    '#8AA8FF',
    '#285fff',
    '#0041ff',
    '#000000',
  ]}
  peakHeight={100}
  pointiness={50}
  blur={50}
/>

Installation

npm install peaked-gradient
yarn add peaked-gradient
pnpm add peaked-gradient

Usage

import { PeakedGradient } from 'peaked-gradient'
<PeakedGradient
  colors={[
    '#B6C9FF',
    '#8AA8FF',
    '#285fff',
    '#0041ff',
    '#000000',
  ]}
  peakHeight={100}
  pointiness={50}
  blur={50}
/>

Props

PropTypeDefaultDescription
colors[string, string, string, string, string]-5 hex colors for the gradient layers
peakHeightnumber100Peak height (0-100)
pointinessnumber50Sharpness of the peak (0-100)
blurnumber50Blur amount (0-100). 0 = no blur, 50 = default, 100 = double blur
classNamestring-Optional CSS class
styleCSSProperties-Optional inline styles

Inspiration