Iridescent Gradient

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/iridescent-gradient

Usage

import { IridescentGradient } from "@reactbytes/iridescent-gradient";

export default function Example() {
  return (
    <IridescentGradient />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | An awesome title | The title text to display in the center. | | switchText | string | switch bg | The text for the switch label. | | bgColor | color | `` | The background color. Defaults to #000 (dark) or #fff (light) depending on the switch state if not provided. | | animationDuration | string | 60s | Controls the speed of the shifting gradient (e.g., '30s', '60s'). | | blurAmount | string | 20px | Controls the intensity of the background blur (e.g., '15px', '20px'). | | opacity | number | 1 | Optional explicit override for the background layer opacity (0 to 1). | | checked | boolean | true | Whether the dark mode is active. |

Presets

This component includes the following design presets:

• Default Style (default)
• Dreamy Aurora (dreamy-aurora)
• Cyber Sharp (cyber-sharp)
• Ghostly Mist (ghostly-mist)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Iridescent Gradient.