{"id":4207,"date":"2025-05-14T08:31:33","date_gmt":"2025-05-14T08:31:33","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4207"},"modified":"2025-05-14T08:31:37","modified_gmt":"2025-05-14T08:31:37","slug":"gradient-generator","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/gradient-generator\/","title":{"rendered":"Gradient Generator"},"content":{"rendered":"<h2 class=\"wp-block-heading\">\ud83c\udf08 Free Gradient Generator \u2013 Create Stunning Gradients Instantly<\/h2>\n\n\n\n<p>Create beautiful and customizable gradients for your design projects with our free Gradient Generator. Whether you&#8217;re designing a website, UI elements, or digital artwork, this tool allows you to craft smooth and vibrant gradients in no time. Customize colors, angles, and more to get the perfect gradient for your needs.<\/p>\n\n\n\r\n<div class=\"gradient-generator\">\r\n    <div class=\"header\">\r\n        <h1><span class=\"dashicons dashicons-art\"><\/span> Gradient Generator<\/h1>\r\n        <p>Create beautiful CSS gradients with our easy-to-use tool. Perfect for backgrounds, buttons, and UI elements.<\/p>\r\n    <\/div>\r\n    \r\n    <div class=\"container\">\r\n        <div class=\"controls\">\r\n            <div class=\"gradient-control\">\r\n                <div class=\"section-title\">\r\n                    <span class=\"dashicons dashicons-slides\"><\/span> Gradient Type\r\n                <\/div>\r\n                \r\n                <div class=\"gradient-type\">\r\n                    <button class=\"active\" data-type=\"linear\">\r\n                        <span class=\"dashicons dashicons-editor-insertmore\"><\/span>\r\n                        Linear\r\n                    <\/button>\r\n                    <button data-type=\"radial\">\r\n                        <span class=\"dashicons dashicons-marker\"><\/span>\r\n                        Radial\r\n                    <\/button>\r\n                    <button data-type=\"conic\">\r\n                        <span class=\"dashicons dashicons-update\"><\/span>\r\n                        Conic\r\n                    <\/button>\r\n                <\/div>\r\n                \r\n                <div class=\"angle-control\">\r\n                    <label for=\"gradient-angle\">\r\n                        <span class=\"dashicons dashicons-location\"><\/span> Angle: <span id=\"angle-value\">90deg<\/span>\r\n                    <\/label>\r\n                    <input type=\"range\" id=\"gradient-angle\" min=\"0\" max=\"360\" value=\"90\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"colors\">\r\n                <div class=\"section-title\">\r\n                    <span class=\"dashicons dashicons-admin-customizer\"><\/span> Colors\r\n                <\/div>\r\n                \r\n                <div class=\"color-list\">\r\n                    <div class=\"color-item\">\r\n                        <div class=\"color-preview\" style=\"background-color: #4b6cb7;\"><\/div>\r\n                        <div class=\"color-input\">\r\n                            <input type=\"text\" class=\"color-input-field\" value=\"#4b6cb7\">\r\n                        <\/div>\r\n                        <div class=\"color-position\">\r\n                            <input type=\"number\" class=\"color-position-input\" min=\"0\" max=\"100\" value=\"0\"> %\r\n                        <\/div>\r\n                        <div class=\"color-actions\">\r\n                            <button class=\"delete-color\"><span class=\"dashicons dashicons-trash\"><\/span><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"color-item\">\r\n                        <div class=\"color-preview\" style=\"background-color: #182848;\"><\/div>\r\n                        <div class=\"color-input\">\r\n                            <input type=\"text\" class=\"color-input-field\" value=\"#182848\">\r\n                        <\/div>\r\n                        <div class=\"color-position\">\r\n                            <input type=\"number\" class=\"color-position-input\" min=\"0\" max=\"100\" value=\"100\"> %\r\n                        <\/div>\r\n                        <div class=\"color-actions\">\r\n                            <button class=\"delete-color\"><span class=\"dashicons dashicons-trash\"><\/span><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"add-color\">\r\n                    <button id=\"add-color-btn\">\r\n                        <span class=\"dashicons dashicons-plus\"><\/span> Add Color\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"gradient-presets\">\r\n                <div class=\"section-title\">\r\n                    <span class=\"dashicons dashicons-star-filled\"><\/span> Preset Gradients\r\n                <\/div>\r\n                \r\n                <div class=\"preset-grid\">\r\n                    <div class=\"preset\" style=\"background: linear-gradient(45deg, #ff9a9e, #fad0c4);\"><\/div>\r\n                    <div class=\"preset\" style=\"background: linear-gradient(to right, #a1c4fd, #c2e9fb);\"><\/div>\r\n                    <div class=\"preset\" style=\"background: linear-gradient(120deg, #d4fc79, #96e6a1);\"><\/div>\r\n                    <div class=\"preset\" style=\"background: linear-gradient(to right, #f78ca0, #f9748f);\"><\/div>\r\n                    <div class=\"preset\" style=\"background: radial-gradient(circle, #5c6bc0, #3f51b5);\"><\/div>\r\n                    <div class=\"preset\" style=\"background: linear-gradient(135deg, #f5f7fa, #c3cfe2);\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"preview-section\">\r\n            <div class=\"preview-box\">\r\n                <div class=\"preview-content\" id=\"gradient-preview\">\r\n                    Gradient Preview\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"css-output\">\r\n                <div class=\"css-header\">\r\n                    <h3><span class=\"dashicons dashicons-editor-code\"><\/span> CSS Code<\/h3>\r\n                    <button class=\"copy-btn\" id=\"copy-code-btn\">\r\n                        <span class=\"dashicons dashicons-admin-page\"><\/span> Copy CSS\r\n                    <\/button>\r\n                <\/div>\r\n                <div class=\"code-container\" id=\"css-code\">\r\nbackground: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);\r\n-webkit-background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);\r\nbackground-size: 100% 100%;\r\nbackground-repeat: no-repeat;\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"footer\">\r\n        <p>\u00a9 2026 ingenio  SEO Tools | Gradient Generator Tool | All Rights Reserved<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\">CSS code copied to clipboard!<\/div>\r\n\r\n<style>\r\n    .gradient-generator {\r\n        --mg-primary: #4b6cb7;\r\n        --mg-primary-light: #8e2de2;\r\n        --mg-secondary: #f8f9fa;\r\n        --mg-border: #e0e0e0;\r\n        --mg-text: #212529;\r\n        --mg-text-light: #6c757d;\r\n        --mg-card-bg: #ffffff;\r\n        --mg-success: #28a745;\r\n        --mg-glass-bg: linear-gradient(to right, #6a11cb, #2575fc);\r\n\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n        color: var(--mg-text);\r\n        background-color: var(--mg-secondary);\r\n        padding: 20px;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .gradient-generator .header {\r\n        background: linear-gradient(to right, var(--mg-primary), #182848);\r\n        color: white;\r\n        padding: 30px;\r\n        text-align: center;\r\n        margin-bottom: 20px;\r\n        border-radius: 10px 10px 0 0;\r\n    }\r\n\r\n    .gradient-generator .header h1 {\r\n        color: white;\r\n        margin: 0;\r\n        font-size: 28px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .gradient-generator .header .dashicons {\r\n        font-size: 32px;\r\n        width: auto;\r\n        height: auto;\r\n    }\r\n\r\n    .gradient-generator .header p {\r\n        color: rgba(255,255,255,0.9);\r\n        margin-top: 8px;\r\n        font-size: 16px;\r\n    }\r\n\r\n    .gradient-generator .container {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 30px;\r\n        padding: 30px;\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .gradient-generator .container {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    .gradient-generator .controls {\r\n        background-color: var(--mg-card-bg);\r\n        border-radius: 15px;\r\n        padding: 25px;\r\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .gradient-generator .section-title {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        font-size: 1.4rem;\r\n        margin-bottom: 20px;\r\n        color: var(--mg-text);\r\n        padding-bottom: 10px;\r\n        border-bottom: 2px solid var(--mg-primary);\r\n    }\r\n\r\n    .gradient-generator .gradient-type {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 15px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .gradient-generator .gradient-type button {\r\n        padding: 15px 10px;\r\n        background: white;\r\n        border: 2px solid var(--mg-border);\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        font-weight: 600;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .gradient-generator .gradient-type button:hover {\r\n        border-color: var(--mg-primary);\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 5px 10px rgba(75, 108, 183, 0.2);\r\n    }\r\n\r\n    .gradient-generator .gradient-type button.active {\r\n        border-color: var(--mg-primary);\r\n        background: #eef5ff;\r\n        box-shadow: 0 5px 15px rgba(75, 108, 183, 0.3);\r\n    }\r\n\r\n    .gradient-generator .angle-control {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .gradient-generator .angle-control label {\r\n        display: block;\r\n        margin-bottom: 10px;\r\n        font-weight: 500;\r\n        color: var(--mg-text);\r\n    }\r\n\r\n    .gradient-generator .angle-control input {\r\n        width: 100%;\r\n    }\r\n\r\n    .gradient-generator .colors {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .gradient-generator .color-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n    }\r\n\r\n    .gradient-generator .color-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        background: white;\r\n        padding: 15px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .gradient-generator .color-preview {\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 10px;\r\n        border: 2px solid #eee;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .gradient-generator .color-input {\r\n        flex: 1;\r\n    }\r\n\r\n    .gradient-generator .color-input input {\r\n        width: 100%;\r\n        padding: 10px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 8px;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .gradient-generator .color-position {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        width: 120px;\r\n    }\r\n\r\n    .gradient-generator .color-position input {\r\n        width: 70px;\r\n        padding: 8px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 8px;\r\n        text-align: center;\r\n    }\r\n\r\n    .gradient-generator .color-actions {\r\n        display: flex;\r\n        gap: 8px;\r\n    }\r\n\r\n    .gradient-generator .color-actions button {\r\n        width: 36px;\r\n        height: 36px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        background: #f0f3ff;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .gradient-generator .color-actions button:hover {\r\n        background: var(--mg-primary);\r\n        color: white;\r\n    }\r\n\r\n    .gradient-generator .add-color {\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    .gradient-generator .add-color button {\r\n        padding: 12px 25px;\r\n        background: var(--mg-primary);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 10px;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .gradient-generator .add-color button:hover {\r\n        background: #3a5796;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 5px 12px rgba(75, 108, 183, 0.4);\r\n    }\r\n\r\n    .gradient-generator .preview-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n\r\n    .gradient-generator .preview-box {\r\n        flex: 1;\r\n        border-radius: 20px;\r\n        margin-bottom: 30px;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n        border: 1px solid #e0e0e0;\r\n        background: #fff;\r\n    }\r\n\r\n    .gradient-generator .preview-content {\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.5rem;\r\n        color: white;\r\n        text-align: center;\r\n        padding: 20px;\r\n        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .gradient-generator .css-output {\r\n        background: #2c3e50;\r\n        border-radius: 15px;\r\n        padding: 25px;\r\n        color: white;\r\n    }\r\n\r\n    .gradient-generator .css-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .gradient-generator .css-header h3 {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .gradient-generator .copy-btn {\r\n        padding: 10px 20px;\r\n        background: var(--mg-primary);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .gradient-generator .copy-btn:hover {\r\n        background: #3a5796;\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .gradient-generator .code-container {\r\n        background: #1a2436;\r\n        border-radius: 10px;\r\n        padding: 20px;\r\n        font-family: monospace;\r\n        white-space: pre-wrap;\r\n        max-height: 180px;\r\n        overflow-y: auto;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .gradient-generator .gradient-presets {\r\n        margin-top: 20px;\r\n        background: #f8f9fa;\r\n        border-radius: 15px;\r\n        padding: 25px;\r\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n    }\r\n\r\n    .gradient-generator .preset-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n        gap: 15px;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    .gradient-generator .preset {\r\n        height: 80px;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        border: 2px solid transparent;\r\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .gradient-generator .preset:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .gradient-generator .preset.active {\r\n        border-color: var(--mg-primary);\r\n        box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.5);\r\n    }\r\n\r\n    .gradient-generator .footer {\r\n        text-align: center;\r\n        padding: 30px;\r\n        color: #6c757d;\r\n        border-top: 1px solid #e9ecef;\r\n        font-size: 0.9rem;\r\n        background: #f8f9fa;\r\n    }\r\n\r\n    .gradient-generator .toast {\r\n        position: fixed;\r\n        bottom: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(100px);\r\n        background: var(--mg-primary);\r\n        color: white;\r\n        padding: 15px 30px;\r\n        border-radius: 50px;\r\n        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);\r\n        z-index: 1000;\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .gradient-generator .toast.show {\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ DOM Elements\r\n        const gradientPreview = document.getElementById('gradient-preview');\r\n        const cssCode = document.getElementById('css-code');\r\n        const gradientTypeBtns = document.querySelectorAll('.gradient-type button');\r\n        const gradientAngle = document.getElementById('gradient-angle');\r\n        const angleValue = document.getElementById('angle-value');\r\n        const colorList = document.querySelector('.color-list');\r\n        const addColorBtn = document.getElementById('add-color-btn');\r\n        const copyCodeBtn = document.getElementById('copy-code-btn');\r\n        const toast = document.getElementById('toast');\r\n        const presets = document.querySelectorAll('.preset');\r\n        \r\n        \/\/ Current state\r\n        let gradientType = 'linear';\r\n        let gradientAngleValue = 90;\r\n        let colors = [\r\n            { color: '#4b6cb7', position: 0 },\r\n            { color: '#182848', position: 100 }\r\n        ];\r\n        \r\n        \/\/ Initialize\r\n        updateGradient();\r\n        \r\n        \/\/ Event Listeners\r\n        gradientTypeBtns.forEach(btn => {\r\n            btn.addEventListener('click', () => {\r\n                gradientTypeBtns.forEach(b => b.classList.remove('active'));\r\n                btn.classList.add('active');\r\n                gradientType = btn.dataset.type;\r\n                updateGradient();\r\n            });\r\n        });\r\n        \r\n        gradientAngle.addEventListener('input', () => {\r\n            gradientAngleValue = gradientAngle.value;\r\n            angleValue.textContent = gradientAngleValue + 'deg';\r\n            updateGradient();\r\n        });\r\n        \r\n        addColorBtn.addEventListener('click', addColor);\r\n        copyCodeBtn.addEventListener('click', copyCssCode);\r\n        \r\n        presets.forEach(preset => {\r\n            preset.addEventListener('click', function() {\r\n                \/\/ Apply the background from this preset\r\n                gradientPreview.style.background = this.style.background;\r\n                \r\n                \/\/ Highlight the selected preset\r\n                presets.forEach(p => p.classList.remove('active'));\r\n                this.classList.add('active');\r\n                \r\n                \/\/ Generate CSS code based on the gradient\r\n                generateCssCode(this.style.background);\r\n            });\r\n        });\r\n        \r\n        \/\/ Functions\r\n        function updateGradient() {\r\n            let gradientCss = '';\r\n            \r\n            if (gradientType === 'linear') {\r\n                gradientCss = `linear-gradient(${gradientAngleValue}deg, ${getColorStops()})`;\r\n            } else if (gradientType === 'radial') {\r\n                gradientCss = `radial-gradient(circle, ${getColorStops()})`;\r\n            } else {\r\n                gradientCss = `conic-gradient(${getColorStops()})`;\r\n            }\r\n            \r\n            gradientPreview.style.background = gradientCss;\r\n            generateCssCode(gradientCss);\r\n        }\r\n        \r\n        function getColorStops() {\r\n            return colors.map(c => `${c.color} ${c.position}%`).join(', ');\r\n        }\r\n        \r\n        function addColor() {\r\n            \/\/ Generate a random color\r\n            const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);\r\n            \/\/ Position midway in the gradient\r\n            const position = Math.floor((colors[colors.length - 1].position + colors[0].position) \/ 2);\r\n            \r\n            colors.push({ color: randomColor, position: position });\r\n            \r\n            \/\/ Add to DOM\r\n            const colorItem = document.createElement('div');\r\n            colorItem.className = 'color-item';\r\n            colorItem.innerHTML = `\r\n                <div class=\"color-preview\" style=\"background-color: ${randomColor};\"><\/div>\r\n                <div class=\"color-input\">\r\n                    <input type=\"text\" class=\"color-input-field\" value=\"${randomColor}\">\r\n                <\/div>\r\n                <div class=\"color-position\">\r\n                    <input type=\"number\" class=\"color-position-input\" min=\"0\" max=\"100\" value=\"${position}\"> %\r\n                <\/div>\r\n                <div class=\"color-actions\">\r\n                    <button class=\"delete-color\"><span class=\"dashicons dashicons-trash\"><\/span><\/button>\r\n                <\/div>\r\n            `;\r\n            \r\n            colorList.appendChild(colorItem);\r\n            \r\n            \/\/ Add event listeners to new inputs\r\n            const colorPreview = colorItem.querySelector('.color-preview');\r\n            const colorInput = colorItem.querySelector('.color-input-field');\r\n            const positionInput = colorItem.querySelector('.color-position-input');\r\n            const deleteBtn = colorItem.querySelector('.delete-color');\r\n            \r\n            colorInput.addEventListener('input', function() {\r\n                const idx = [...colorList.children].indexOf(colorItem);\r\n                colors[idx].color = this.value;\r\n                colorPreview.style.backgroundColor = this.value;\r\n                updateGradient();\r\n            });\r\n            \r\n            colorPreview.addEventListener('click', function() {\r\n                colorInput.click();\r\n            });\r\n            \r\n            positionInput.addEventListener('input', function() {\r\n                const idx = [...colorList.children].indexOf(colorItem);\r\n                colors[idx].position = parseInt(this.value);\r\n                updateGradient();\r\n            });\r\n            \r\n            deleteBtn.addEventListener('click', function() {\r\n                const idx = [...colorList.children].indexOf(colorItem);\r\n                if (colors.length > 2) {\r\n                    colors.splice(idx, 1);\r\n                    colorItem.remove();\r\n                    updateGradient();\r\n                } else {\r\n                    showToast(\"You need at least 2 colors\");\r\n                }\r\n            });\r\n            \r\n            updateGradient();\r\n        }\r\n        \r\n        \/\/ Add event listeners to existing color inputs\r\n        document.querySelectorAll('.color-item').forEach((colorItem, idx) => {\r\n            const colorInput = colorItem.querySelector('.color-input-field');\r\n            const colorPreview = colorItem.querySelector('.color-preview');\r\n            const positionInput = colorItem.querySelector('.color-position-input');\r\n            const deleteBtn = colorItem.querySelector('.delete-color');\r\n            \r\n            colorInput.addEventListener('input', function() {\r\n                colors[idx].color = this.value;\r\n                colorPreview.style.backgroundColor = this.value;\r\n                updateGradient();\r\n            });\r\n            \r\n            colorPreview.addEventListener('click', function() {\r\n                colorInput.click();\r\n            });\r\n            \r\n            positionInput.addEventListener('input', function() {\r\n                colors[idx].position = parseInt(this.value);\r\n                updateGradient();\r\n            });\r\n            \r\n            deleteBtn.addEventListener('click', function() {\r\n                if (colors.length > 2) {\r\n                    colors.splice(idx, 1);\r\n                    colorItem.remove();\r\n                    updateGradient();\r\n                } else {\r\n                    showToast(\"You need at least 2 colors\");\r\n                }\r\n            });\r\n        });\r\n        \r\n        function generateCssCode(gradientCss) {\r\n            cssCode.textContent = `background: ${gradientCss};\r\n-webkit-background: ${gradientCss};\r\nbackground-size: 100% 100%;\r\nbackground-repeat: no-repeat;`;\r\n        }\r\n        \r\n        function copyCssCode() {\r\n            \/\/ Modern approach using Clipboard API\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(cssCode.textContent)\r\n                    .then(() => {\r\n                        showToast('CSS code copied to clipboard!');\r\n                    })\r\n                    .catch(err => {\r\n                        console.error('Failed to copy using Clipboard API:', err);\r\n                        fallbackCopy();\r\n                    });\r\n            } else {\r\n                \/\/ Fallback for older browsers\r\n                fallbackCopy();\r\n            }\r\n        }\r\n        \r\n        function fallbackCopy() {\r\n            const textArea = document.createElement('textarea');\r\n            textArea.value = cssCode.textContent;\r\n            textArea.style.position = 'fixed';  \/\/ Prevent scrolling\r\n            textArea.style.left = '-9999px';    \/\/ Move off-screen\r\n            textArea.style.top = '0';\r\n            document.body.appendChild(textArea);\r\n            textArea.focus();\r\n            textArea.select();\r\n            \r\n            try {\r\n                const successful = document.execCommand('copy');\r\n                if (successful) {\r\n                    showToast('CSS code copied!');\r\n                } else {\r\n                    showToast('Press Ctrl+C to copy');\r\n                }\r\n            } catch (err) {\r\n                showToast('Could not copy text. Please try again.');\r\n                console.error('Fallback copy failed:', err);\r\n            }\r\n            \r\n            document.body.removeChild(textArea);\r\n        }\r\n        \r\n        function showToast(message) {\r\n            toast.textContent = message;\r\n            toast.classList.add('show');\r\n            \r\n            setTimeout(() => {\r\n                toast.classList.remove('show');\r\n            }, 3000);\r\n        }\r\n    });\r\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2728 Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udfa8 <strong>Customizable Gradients<\/strong> \u2013 Choose from a variety of color combinations and adjust settings<\/li>\n\n\n\n<li>\u26a1 <strong>Real-Time Preview<\/strong> \u2013 See your gradient in real-time as you customize it<\/li>\n\n\n\n<li>\ud83d\udd04 <strong>Multiple Gradient Types<\/strong> \u2013 Linear, radial, and more to suit different design needs<\/li>\n\n\n\n<li>\ud83d\udeab <strong>No Sign-Up or Download<\/strong> \u2013 Use the tool for free, no registration required<\/li>\n\n\n\n<li>\ud83d\udd12 <strong>Private &amp; Secure<\/strong> \u2013 Your gradient designs are not stored or shared<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 How It Works<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Choose your colors<\/strong> \u2013 Select from preset colors or input custom colors for your gradient<\/li>\n\n\n\n<li><strong>Adjust the gradient settings<\/strong> \u2013 Change the angle, direction, and type (linear or radial)<\/li>\n\n\n\n<li><strong>Preview in real-time<\/strong> \u2013 See how your gradient looks instantly<\/li>\n\n\n\n<li><strong>Copy the CSS code<\/strong> \u2013 Easily copy the generated CSS code and use it in your project<\/li>\n\n\n\n<li><strong>Save and reuse<\/strong> \u2013 Save your gradient settings for future use<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddd1\u200d\ud83d\udcbb Who Uses This Tool?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Web Designers<\/strong> \u2013 Generate gradient backgrounds, buttons, and UI elements for websites<\/li>\n\n\n\n<li><strong>Graphic Designers<\/strong> \u2013 Create smooth gradients for logos, banners, and digital artwork<\/li>\n\n\n\n<li><strong>UI\/UX Designers<\/strong> \u2013 Design appealing gradient color schemes for apps and interfaces<\/li>\n\n\n\n<li><strong>Developers<\/strong> \u2013 Implement gradients into web projects with the generated CSS code<\/li>\n\n\n\n<li><strong>Artists<\/strong> \u2013 Explore creative color combinations for artwork and design projects<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 Why Use a Gradient Generator?<\/h2>\n\n\n\n<p>A gradient generator is a powerful tool for designing visually engaging elements in digital projects. Whether you\u2019re looking to create a smooth gradient background for a website, a colorful button for a mobile app, or a unique visual effect for an artwork, this tool gives you the flexibility to experiment with different color combinations and adjust angles for the perfect gradient. You can quickly generate the CSS code to implement it in your projects, saving time and ensuring design consistency.<\/p>\n\n\n\n<p><strong>Example CSS Gradient Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopyEdit<code>background: linear-gradient(45deg, #FF5733, #33C1FF);\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Create Beautiful Gradients Instantly \u2013 Try It Now!<\/h2>\n\n\n\n<p>Generate customizable gradients for your web and design projects quickly and easily with our free Gradient Generator tool.<\/p>\n\n\n\n<p>\ud83d\udc49 <strong>[Generate Your Gradient Now]<\/strong><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf08 Free Gradient Generator \u2013 Create Stunning Gradients Instantly Create beautiful and customizable gradients for your design projects with our free Gradient Generator. Whether you&#8217;re designing a website, UI elements, or digital artwork, this tool allows you to craft smooth and vibrant gradients in no time. Customize colors, angles, and more to get the perfect [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/gradient-generator\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4207","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4207\/revisions"}],"predecessor-version":[{"id":4208,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4207\/revisions\/4208"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4207"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}