acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 19, 2025
diff --git a/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/README.md b/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/README.md
@@ -0,0 +1,21 @@
+# CSS Gradient Generator
+**Contributor:** [Aerospace Prog](https://github.com/Aerospace-prog)
+
+## Description
+An interactive and responsive tool to generate CSS linear and radial gradients. Users can select two primary colors, add multiple color stops, choose a gradient type (linear/radial) and direction, and even generate random gradients. The generated CSS code can be easily copied to the clipboard.
+
+## Features
+- **Linear and Radial Gradients:** Choose between different gradient types.
+- **Multiple Color Stops:** Add and remove additional colors to create complex gradients.
+- **Customizable Colors:** Easily pick colors using color input fields.
+- **Direction Control:** Set the direction for linear gradients.
+- **Random Gradient Generator:** Get inspired with randomly generated gradients.
+- **Instant Preview:** See your gradient changes in real-time.
+- **Copy CSS:** One-click copy of the generated CSS code.
+- **Responsive Design:** Works seamlessly across various screen sizes.
+
+## How to Run
+1. Open `index.html` in your web browser.
+2. Experiment with different colors, add color stops, select gradient types and directions.
+3. Click "Generate Gradient" to apply your selections or "Random Gradient" for inspiration.
+4. Click "Copy CSS" to copy the generated CSS to your clipboard.
diff --git a/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/index.html b/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Gradient Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>CSS Gradient Generator</h1>
+        <div class="gradient-preview" style="background: linear-gradient(to right, #ff0000, #0000ff);"></div>
+        <div class="controls">
+            <div class="control-group">
+                <label for="gradient-type">Gradient Type:</label>
+                <select id="gradient-type">
+                    <option value="linear">Linear</option>
+                    <option value="radial">Radial</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="color1">Color 1:</label>
+                <input type="color" id="color1" value="#ff0000">
+                <label for="color2">Color 2:</label>
+                <input type="color" id="color2" value="#0000ff">
+            </div>
+            <div id="color-stops-container">
+                <!-- Additional color stops will be added here by JavaScript -->
+            </div>
+            <button id="add-color-stop">Add Color Stop</button>
+            <div class="control-group">
+                <label for="direction">Direction:</label>
+                <select id="direction">
+                    <option value="to right">To Right</option>
+                    <option value="to left">To Left</option>
+                    <option value="to top">To Top</option>
+                    <option value="to bottom">To Bottom</option>
+                    <option value="45deg">45deg</option>
+                    <option value="90deg">90deg</option>
+                    <option value="135deg">135deg</option>
+                    <option value="180deg">180deg</option>
+                </select>
+            </div>
+            <button id="generate-btn">Generate Gradient</button>
+            <button id="random-btn">Random Gradient</button>
+        </div>
+        <div class="output">
+            <textarea id="css-output" rows="5" readonly></textarea>
+            <button id="copy-btn">Copy CSS</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/script.js b/Domains/Frontend/MiniProjects/CSS-Gradient-Generator/script.js
@@ -0,0 +1,109 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const color1Input = document.getElementById('color1');
+    const color2Input = document.getElementById('color2');
+    const directionSelect = document.getElementById('direction');
+    const generateBtn = document.getElementById('generate-btn');
+    const gradientPreview = document.querySelector('.gradient-preview');
+    const cssOutput = document.getElementById('css-output');
+    const copyBtn = document.getElementById('copy-btn');
+    const gradientTypeSelect = document.getElementById('gradient-type');
+    const addColorStopBtn = document.getElementById('add-color-stop');
+    const colorStopsContainer = document.getElementById('color-stops-container');
+    const randomBtn = document.getElementById('random-btn');
+
+    let colorStops = [];
+
+    function updateGradient() {
+        const gradientType = gradientTypeSelect.value;
+        const colors = [color1Input.value, ...colorStops.map(cs => cs.input.value), color2Input.value];
+        const direction = directionSelect.value;
+
+        let gradientCSS;
+        if (gradientType === 'linear') {
+            gradientCSS = `linear-gradient(${direction}, ${colors.join(', ')})`;
+        } else {
+            // For radial, direction can be 'circle at center', 'ellipse at center', etc. or just 'circle', 'ellipse'
+            // For simplicity, we'll use 'circle at center' for now or just omit if direction is not shape-based
+            const radialShape = direction.includes('deg') ? 'circle' : direction; // Simple heuristic
+            gradientCSS = `radial-gradient(${radialShape}, ${colors.join(', ')})`;
+        }
+
+        gradientPreview.style.background = gradientCSS;
+        cssOutput.value = `background: ${gradientCSS};`;
+    }
+
+    function addColorStop() {
+        const newColorStop = {
+            id: `color-stop-${colorStops.length}`,
+            input: document.createElement('input'),
+            removeBtn: document.createElement('button')
+        };
+
+        newColorStop.input.type = 'color';
+        newColorStop.input.value = '#ffffff'; // Default to white
+        newColorStop.input.addEventListener('input', updateGradient);
+
+        newColorStop.removeBtn.textContent = 'X';
+        newColorStop.removeBtn.className = 'remove-color-stop';
+        newColorStop.removeBtn.onclick = () => {
+            colorStopsContainer.removeChild(newColorStop.input);
+            colorStopsContainer.removeChild(newColorStop.removeBtn);
+            colorStops = colorStops.filter(cs => cs.id !== newColorStop.id);
+            updateGradient();
+        };
+
+        colorStopsContainer.appendChild(newColorStop.input);
+        colorStopsContainer.appendChild(newColorStop.removeBtn);
+        colorStops.push(newColorStop);
+        updateGradient();
+    }
+
+    function generateRandomColor() {
+        const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
+        return randomColor.padEnd(7, '0'); // Ensure 6 characters
+    }
+
+    function generateRandomGradient() {
+        color1Input.value = generateRandomColor();
+        color2Input.value = generateRandomColor();
+
+        // Clear existing color stops
+        colorStops.forEach(cs => {
+            colorStopsContainer.removeChild(cs.input);
+            colorStopsContainer.removeChild(cs.removeBtn);
+        });
+        colorStops = [];
+
+        // Add 0-2 random color stops
+        const numRandomStops = Math.floor(Math.random() * 3); // 0, 1, or 2
+        for (let i = 0; i < numRandomStops; i++) {
+            addColorStop();
+            colorStops[i].input.value = generateRandomColor();
+        }
+
+        const directions = ['to right', 'to left', 'to top', 'to bottom', '45deg', '90deg', '135deg', '180deg'];
+        directionSelect.value = directions[Math.floor(Math.random() * directions.length)];
+
+        const gradientTypes = ['linear', 'radial'];
+        gradientTypeSelect.value = gradientTypes[Math.floor(Math.random() * gradientTypes.length)];
+
+        updateGradient();
+    }
+
+    // Initial gradient update
+    updateGradient();
+
+    color1Input.addEventListener('input', updateGradient);
+    color2Input.addEventListener('input', updateGradient);
+    directionSelect.addEventListener('change', updateGradient);
+    gradientTypeSelect.addEventListener('change', updateGradient);
+    generateBtn.addEventListener('click', updateGradient);
+    addColorStopBtn.addEventListener('click', addColorStop);
+    randomBtn.addEventListener('click', generateRandomGradient);
+
+    copyBtn.addEventListener('click', () => {
+        cssOutput.select();
+        document.execCommand('copy');
+        alert('CSS copied to clipboard!');
+    });
+});