{"id":121,"date":"2024-07-05T08:17:47","date_gmt":"2024-07-05T07:17:47","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=121"},"modified":"2025-03-22T05:27:24","modified_gmt":"2025-03-22T05:27:24","slug":"css-gradient-generator","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/css-gradient-generator\/","title":{"rendered":"CSS Gradient Generator"},"content":{"rendered":"\n<p>The CSS Gradient Generator lets you create beautiful gradients and get the CSS code to use in your web projects.<\/p>\n\n\n\n<div id=\"css-gradient-generator\">\n    <style>\n        \/* Reset all styles for this container *\/\n        #css-gradient-generator {\n            all: unset;\n            display: block;\n        }\n\n        \/* Reapply custom styles *\/\n        #css-gradient-generator * {\n            all: revert;\n        }\n\n        \/* Apply custom styles *\/\n        #css-gradient-generator body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #f0f0f0;\n            margin: 0;\n            flex-direction: column;\n      }\n\n\n        #css-gradient-generator .container {\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            text-align: center;\n            width: 100%;\n            max-width: 400px;\n        }\n\n        #css-gradient-generator .input-group {\n            margin-bottom: 15px;\n            text-align: left;\n        }\n\n        #css-gradient-generator .input-group label {\n            display: block;\n            margin-bottom: 5px;\n        }\n\n        #css-gradient-generator .input-group input,\n        #css-gradient-generator .input-group select {\n            width: calc(100% - 30px);\n            padding: 8px;\n            margin-bottom: 10px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            display: inline-block;\n        }\n\n        #css-gradient-generator .input-group input[type=\"color\"] {\n            display: none;\n        }\n\n        #css-gradient-generator .color-swatch {\n            width: 30px;\n            height: 30px;\n            display: inline-block;\n            border: 1px solid #ccc;\n            cursor: pointer;\n            vertical-align: middle;\n            margin-left: 10px;\n            background-color: white;\n        }\n\n        #css-gradient-generator .gradient-preview {\n            width: 100%;\n            height: 100px;\n            border: 1px solid #ccc;\n            margin-bottom: 15px;\n            border-radius: 4px;\n        }\n\n        #css-gradient-generator textarea {\n            width: 100%;\n            height: 100px;\n            padding: 10px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            resize: none;\n        }\n\n        #css-gradient-generator button {\n            padding: 10px;\n            border: none;\n            border-radius: 4px;\n            background-color: lightgrey;\n            color: black;\n            cursor: pointer;\n            margin-top: 10px;\n        }\n\n        #css-gradient-generator button:hover {\n            background-color: grey;\n        }\n\n        #css-gradient-generator button#clearBtn {\n            background-color: lightgrey;\n            color: black;\n        }\n\n        #css-gradient-generator button#clearBtn:hover {\n            background-color: grey;\n        }\n\n        #css-gradient-generator button#copyCssBtn {\n            background-color: lightgrey;\n            color: black;\n        }\n\n        #css-gradient-generator button#copyCssBtn:hover {\n            background-color: grey;\n        }\n\n        #css-gradient-generator .removeColorBtn {\n            background-color: #dc3545;\n            color: white;\n            padding: 5px 10px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            margin-top: 5px;\n        }\n\n        #css-gradient-generator .removeColorBtn:hover {\n            background-color: #c82333;\n        }\n\n        #css-gradient-generator .selectColorBtn {\n            background-color: lightgrey;\n            color: black;\n            margin-top: 10px;\n            cursor: pointer;\n        }\n\n        #css-gradient-generator .selectColorBtn:hover {\n            background-color: grey;\n        }\n\n        \/* Modal styles *\/\n        #colorModal {\n            display: none;\n            position: fixed;\n            z-index: 1;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            overflow: auto;\n            background-color: rgba(0, 0, 0, 0.5);\n            justify-content: center;\n            align-items: center;\n        }\n\n        #colorModalContent {\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            text-align: center;\n            max-width: 400px;\n            width: 90%;\n        }\n\n        #colorModalClose {\n            color: #aaa;\n            float: right;\n            font-size: 28px;\n            font-weight: bold;\n        }\n\n        #colorModalClose:hover,\n        #colorModalClose:focus {\n            color: black;\n            text-decoration: none;\n            cursor: pointer;\n        }\n\n        \/* Responsive styling *\/\n        @media (max-width: 768px) {\n            #css-gradient-generator .container {\n                width: 90%;\n                padding: 10px;\n            }\n\n            #css-gradient-generator .input-group input,\n            #css-gradient-generator .input-group select {\n                width: calc(100% - 20px);\n                padding: 6px;\n            }\n\n            #css-gradient-generator .color-swatch {\n                margin-left: 5px;\n            }\n\n            #css-gradient-generator .gradient-preview {\n                height: 80px;\n            }\n\n            #css-gradient-generator textarea {\n                height: 80px;\n            }\n        }\n    <\/style>\n\n    <div class=\"container\">\n   \n        <div id=\"colorInputs\">\n            <div class=\"input-group color-group\">\n                <label for=\"color1\">Color 1:<\/label>\n                <span id=\"color1Hex\">#ffffff<\/span>\n                <input type=\"color\" id=\"color1\" value=\"#ffffff\" class=\"color-picker\">\n                <div class=\"color-swatch\" id=\"color1Swatch\"><\/div>\n                <button class=\"selectColorBtn\">Select Color 1<\/button>\n                <button class=\"removeColorBtn\" style=\"display: none;\">Remove<\/button>\n            <\/div>\n            <div class=\"input-group color-group\">\n                <label for=\"color2\">Color 2:<\/label>\n                <span id=\"color2Hex\">#ffffff<\/span>\n                <input type=\"color\" id=\"color2\" value=\"#ffffff\" class=\"color-picker\">\n                <div class=\"color-swatch\" id=\"color2Swatch\"><\/div>\n                <button class=\"selectColorBtn\">Select Color 2<\/button>\n                <button class=\"removeColorBtn\" style=\"display: none;\">Remove<\/button>\n            <\/div>\n        <\/div>\n        <button id=\"addColorBtn\">Add Color<\/button>\n        <div class=\"input-group\">\n            <label for=\"direction\">Direction:<\/label>\n            <select id=\"direction\">\n                <option value=\"to right\">To Right<\/option>\n                <option value=\"to left\">To Left<\/option>\n                <option value=\"to bottom\">To Bottom<\/option>\n                <option value=\"to top\">To Top<\/option>\n                <option value=\"to bottom right\">To Bottom Right<\/option>\n                <option value=\"to bottom left\">To Bottom Left<\/option>\n                <option value=\"to top right\">To Top Right<\/option>\n                <option value=\"to top left\">To Top Left<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"gradient-preview\" id=\"gradientPreview\"><\/div>\n        <button id=\"clearBtn\">Clear<\/button>\n        <button id=\"copyCssBtn\">Copy CSS<\/button>\n        <textarea id=\"cssCode\" placeholder=\"background: linear-gradient(to right, #ffffff, #ffffff);\"><\/textarea>\n    <\/div>\n\n    <!-- Modal for Color Selection -->\n    <div id=\"colorModal\">\n        <div id=\"colorModalContent\">\n            <span id=\"colorModalClose\">&times;<\/span>\n            <h2>Select Color<\/h2>\n            <input type=\"color\" id=\"modalColorPicker\">\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const colorInputsContainer = document.getElementById('colorInputs');\n            const addColorBtn = document.getElementById('addColorBtn');\n            const directionSelect = document.getElementById('direction');\n            const gradientPreview = document.getElementById('gradientPreview');\n            const clearBtn = document.getElementById('clearBtn');\n            const copyCssBtn = document.getElementById('copyCssBtn');\n            const cssCodeTextarea = document.getElementById('cssCode');\n            const colorModal = document.getElementById('colorModal');\n            const colorModalContent = document.getElementById('colorModalContent');\n            const colorModalClose = document.getElementById('colorModalClose');\n            const modalColorPicker = document.getElementById('modalColorPicker');\n            let activeColorInput = null;\n            let colorCount = 2;\n\n            function updateGradient() {\n                const colors = [];\n                const colorInputs = document.querySelectorAll('.color-group input[type=\"color\"]');\n                colorInputs.forEach(input => {\n                    colors.push(input.value);\n                    document.getElementById(input.id + 'Hex').textContent = input.value;\n                    document.getElementById(input.id + 'Swatch').style.backgroundColor = input.value;\n                });\n\n                const direction = directionSelect.value;\n                const gradient = `linear-gradient(${direction}, ${colors.join(', ')})`;\n\n                gradientPreview.style.background = gradient;\n                cssCodeTextarea.value = `background: ${gradient};`;\n            }\n\n            function addColorInput() {\n                if (colorCount < 4) {\n                    colorCount++;\n                    const colorGroup = document.createElement('div');\n                    colorGroup.className = 'input-group color-group';\n                    colorGroup.innerHTML = `\n                        <label for=\"color${colorCount}\">Color ${colorCount}:<\/label>\n                        <span id=\"color${colorCount}Hex\">#ffffff<\/span>\n                        <input type=\"color\" id=\"color${colorCount}\" value=\"#ffffff\" class=\"color-picker\">\n                        <div class=\"color-swatch\" id=\"color${colorCount}Swatch\"><\/div>\n                        <button class=\"selectColorBtn\">Select Color ${colorCount}<\/button>\n                        <button class=\"removeColorBtn\">Remove<\/button>\n                    `;\n                    colorInputsContainer.appendChild(colorGroup);\n                    colorGroup.querySelector('input[type=\"color\"]').addEventListener('input', updateGradient);\n                    colorGroup.querySelector('.selectColorBtn').addEventListener('click', () => openColorModal(colorGroup.querySelector('input[type=\"color\"]')));\n                    colorGroup.querySelector('.removeColorBtn').addEventListener('click', () => removeColorInput(colorGroup));\n                    colorGroup.querySelector('.color-swatch').addEventListener('dblclick', () => openColorModal(colorGroup.querySelector('input[type=\"color\"]')));\n                    updateGradient();\n                }\n            }\n\n            function removeColorInput(colorGroup) {\n                colorInputsContainer.removeChild(colorGroup);\n                colorCount--;\n                updateGradient();\n            }\n\n            function clearInputs() {\n                const colorInputs = document.querySelectorAll('.color-group input[type=\"color\"]');\n                colorInputs.forEach(input => {\n                    input.value = '#ffffff';\n                    document.getElementById(input.id + 'Hex').textContent = '#ffffff';\n                    document.getElementById(input.id + 'Swatch').style.backgroundColor = '#ffffff';\n                });\n                gradientPreview.style.background = '';\n                cssCodeTextarea.value = '';\n                cssCodeTextarea.placeholder = \"background: linear-gradient(to right, #ffffff, #ffffff);\";\n                updateGradient();\n            }\n\n            function copyCssToClipboard() {\n                cssCodeTextarea.select();\n                document.execCommand('copy');\n                alert('CSS code copied to clipboard!');\n            }\n\n            function openColorModal(colorInput) {\n                activeColorInput = colorInput;\n                modalColorPicker.value = colorInput.value;\n                colorModal.style.display = 'flex';\n            }\n\n            colorModalClose.addEventListener('click', () => {\n                colorModal.style.display = 'none';\n            });\n\n            window.addEventListener('click', (event) => {\n                if (event.target === colorModal) {\n                    colorModal.style.display = 'none';\n                }\n            });\n\n            modalColorPicker.addEventListener('input', () => {\n                if (activeColorInput) {\n                    activeColorInput.value = modalColorPicker.value;\n                    updateGradient();\n                }\n            });\n\n            document.querySelectorAll('.color-group input[type=\"color\"]').forEach(input => {\n                input.addEventListener('input', updateGradient);\n            });\n\n            document.querySelectorAll('.color-swatch').forEach(swatch => {\n                swatch.addEventListener('dblclick', (e) => {\n                    const colorInput = document.getElementById(swatch.id.replace('Swatch', ''));\n                    openColorModal(colorInput);\n                });\n            });\n\n            document.querySelectorAll('.selectColorBtn').forEach(button => {\n                button.addEventListener('click', (e) => {\n                    const colorInput = document.getElementById(e.target.previousElementSibling.previousElementSibling.id);\n                    openColorModal(colorInput);\n                });\n            });\n\n            directionSelect.addEventListener('change', updateGradient);\n            addColorBtn.addEventListener('click', addColorInput);\n            clearBtn.addEventListener('click', clearInputs);\n            copyCssBtn.addEventListener('click', copyCssToClipboard);\n\n            \/\/ Initialize gradient on load\n            updateGradient();\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The CSS Gradient Generator lets you create beautiful gradients and get the CSS code to use in your web projects. Color 1: #ffffff Select Color 1 Remove Color 2: #ffffff Select Color 2 Remove Add Color Direction: To RightTo LeftTo BottomTo TopTo Bottom RightTo Bottom LeftTo Top RightTo Top Left Clear Copy CSS &times; Select &#8230; <a title=\"CSS Gradient Generator\" class=\"read-more\" href=\"https:\/\/hellopromptly.com\/index.php\/free-tools\/css-gradient-generator\/\" aria-label=\"Read more about CSS Gradient Generator\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-121","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":8,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/121\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/121\/revisions\/704"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}