🌀 Gradient Generator

A beautiful and interactive Gradient Generator built using React.js.
It dynamically generates random linear or radial gradients and lets you copy their CSS code with a single click.

---

🚀 Features

• 🎨 Generate random color gradients.
• 🔁 Choose between Linear and Radial types.
• 🧮 Set how many gradients you want to generate.
• 📋 Copy gradient CSS code to clipboard.
• 💬 Toast notification when code is copied.
• 💻 Responsive design using Tailwind CSS.

---

🛠️ Tech Stack

• React.js — Frontend framework
• React Toastify — Notifications
• React Icons / Remix Icons — Icon pack
• Tailwind CSS — Styling

---

📂 Project Structure

src/
│
├── components/
│ └── GenerateGradients.jsx # Main gradient generator component
│
├── assets/
│ └── color.png # App logo
│
└── App.js # Entry point

---

⚙️ Code Explanation

1. Importing Dependencies

import React, { useEffect, useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'remixicon/fonts/remixicon.css';

• useState — manages component state.
• useEffect — runs code when state changes.
• toast — displays success messages when gradients are copied.

2. State Management

const [num, setNum] = useState(10);
const [type, setType] = useState("Linear");
const [gradients, setGradient] = useState([]);

• num: number of gradients to display.
• type: gradient type (Linear or Radial).
• gradients: array of generated gradient objects.

const generateColor = () => {
  const rgb = 255 * 255 * 255;
  const random = Math.random() * rgb;
  const int = Math.floor(random);
  const hexCode = int.toString(16);
  const colorHex = hexCode.padStart(6, "0");
  return `#${colorHex}`;
};

✅ Creates a random hex color (like #A1B2C3) by:

• Generating a random number within 24-bit color range.
• Converting it to hexadecimal.
• Padding zeros to ensure it’s a 6-digit code.

4. Generating Gradient Array

const generateGradient = () => {
  const color = [];
  for (let i = 0; i < num; i++) {
    const color1 = generateColor();
    const color2 = generateColor();
    const deg = Math.floor(Math.random() * 360);
    const degString = `${deg}deg`;

    if (type === "Linear") {
      color.push({
        gradient: `linear-gradient(${degString},${color1},${color2})`,
        css: `background: 'linear-gradient(${degString},${color1},${color2})'`,
        colorType: 'Linear'
      });
    } else {
      color.push({
        gradient: `radial-gradient(circle,${color1},${color2})`,
        css: `background: 'radial-gradient(circle,${color1},${color2})'`,
        colorType: 'Radial'
      });
    }
  }
  setGradient(color);
};

🔹 This creates an array of gradient objects with two random colors. Each gradient object stores:

{
  gradient: "linear-gradient(120deg, #a1b2c3, #f3d1a1)",
  css: "background: 'linear-gradient(120deg, #a1b2c3, #f3d1a1)'",
  colorType: "Linear"
}

5. Copying Gradient CSS

const copy = (colorCode, colType) => {
  navigator.clipboard.writeText(colorCode);
  toast.success(`${colType} Gradient Code is copied`, { position: "top-center" });
};

Copies the gradient CSS to the clipboard and shows a toast notification confirming the action.

6. Automatically Generate Gradients on Change

useEffect(() => {
  generateGradient();
}, [num, type]);

Whenever the number or type of gradients changes, new gradients are generated automatically.

7. Displaying Gradients

{
  gradients.map((item, index) => (
    <div
      key={index}
      className='w-full h-[150px] rounded-lg flex justify-end items-start'
      style={{ background: item.gradient }}
    >
      <button
        onClick={() => copy(item.css, item.colorType)}
        className='bg-black/10 w-[60px] p-2 rounded-tr-lg'
      >
        copy
      </button>
    </div>
  ))
}

Each gradient box:

• Uses inline CSS to display its gradient.
• Has a “copy” button that copies the gradient CSS.

💡 Example Workflow

1. The app loads → 10 Linear gradients appear automatically.
2. User changes gradient type to “Radial” → all gradients regenerate.
3. User enters 15 → 15 new gradients appear.
4. Clicking “copy” copies the CSS code and shows a toast message.

🧾Summary

The Gradient Generator is a fun and visually appealing React project that demonstrates:

Random color generation.

• Conditional rendering (Linear vs. Radial).
• React Hooks for interactivity.
• Clipboard and notification functionality.
• Responsive, modern UI built with Tailwind CSS.

This project is not just about generating gradients — it’s about bringing creativity and logic together. It shows how a few lines of JavaScript can turn random numbers into beautiful color combinations, and how React’s state management can make everything update instantly with just a few clicks.

Building this app taught me how to think in terms of components, handle user input smoothly, and give instant feedback through toasts and dynamic rendering. Every time a new gradient appears, it feels like a small creative moment powered by code.

It’s a perfect project for anyone who wants to strengthen their understanding of React, JavaScript logic, and interactive UI design — while also having fun seeing endless combinations of colors come to life on screen. 🎨💻

📸 Preview

👨‍💻 Author

Sharwan Jung Kunwar Full-Stack Developer | React & Java Enthusiast📍 Nepal