{"id":1594,"date":"2024-12-08T14:22:02","date_gmt":"2024-12-08T14:22:02","guid":{"rendered":"https:\/\/donhit.com\/en\/?p=1594"},"modified":"2025-02-07T09:45:23","modified_gmt":"2025-02-07T09:45:23","slug":"gradient-color-generator","status":"publish","type":"post","link":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/","title":{"rendered":"Gradient Color Generator"},"content":{"rendered":"<p><center><div class=\"bg-white rounded-xl shadow-2xl p-8 w-full max-w-5xl\">\r\n        <h2 class=\"text-3xl font-bold mb-6 text-center text-gray-800\">Gradient Color Generator<\/h2>\r\n        \r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n            <div class=\"space-y-4\">\r\n                <div class=\"bg-gray-50 p-4 rounded-lg\">\r\n                    <canvas id=\"gradientCanvas\" width=\"500\" height=\"300\" class=\"w-full rounded-lg\"><\/canvas>\r\n                <\/div>\r\n                \r\n                <div class=\"flex space-x-2 justify-center\">\r\n                    <button id=\"copyCSS\" class=\"bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition flex items-center\">\r\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mr-2\">\r\n                            <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\r\n                            <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\r\n                        <\/svg>\r\n                        Copy CSS\r\n                    <\/button>\r\n                    <button id=\"saveImage\" class=\"bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition flex items-center\">\r\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mr-2\">\r\n                            <path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"><\/path>\r\n                            <polyline points=\"14 2 14 8 20 8\"><\/polyline>\r\n                            <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"12\"><\/line>\r\n                            <line x1=\"9\" y1=\"15\" x2=\"15\" y2=\"15\"><\/line>\r\n                        <\/svg>\r\n                        Save Image\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div>\r\n                <div class=\"mb-4\">\r\n                    <label class=\"block text-sm font-medium text-gray-700 mb-2\">Gradient Type<\/label>\r\n                    <div class=\"flex space-x-2\">\r\n                        <button id=\"linearGradient\" class=\"px-4 py-2 rounded-md bg-blue-500 text-white flex-1 transition hover:bg-blue-600\">\r\n                            Linear\r\n                        <\/button>\r\n                        <button id=\"radialGradient\" class=\"px-4 py-2 rounded-md bg-gray-200 text-gray-700 flex-1 transition hover:bg-gray-300\">\r\n                            Radial\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"angleControl\" class=\"mb-4\">\r\n                    <label class=\"block text-sm font-medium text-gray-700 mb-2\">Gradient Angle<\/label>\r\n                    <input type=\"range\" id=\"angleSlider\" min=\"0\" max=\"360\" value=\"90\" class=\"w-full h-2 bg-blue-100 rounded-lg appearance-none cursor-pointer\">\r\n                    <div class=\"text-center mt-2 text-gray-700\" id=\"angleDisplay\">90\u00b0<\/div>\r\n                <\/div>\r\n\r\n                <div id=\"colorControls\" class=\"space-y-4\">\r\n                    <!-- Color stops will be dynamically added here -->\r\n                <\/div>\r\n\r\n                <div class=\"mt-4\">\r\n                    <button id=\"addColorStop\" class=\"w-full bg-purple-500 text-white px-4 py-2 rounded-md hover:bg-purple-600 transition\">\r\n                        Add Color\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"mt-4 bg-gray-100 p-3 rounded-md\">\r\n                    <code id=\"gradientCode\" class=\"block text-sm text-gray-700 break-words\"><\/code>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        class GradientGenerator {\r\n            constructor() {\r\n                this.canvas = document.getElementById('gradientCanvas');\r\n                this.ctx = this.canvas.getContext('2d');\r\n                this.colors = ['#ff6b6b', '#4ecdc4'];\r\n                this.gradientType = 'linear';\r\n                this.angle = 90;\r\n                this.maxColorStops = 5;\r\n\r\n                this.initEventListeners();\r\n                this.renderColorControls();\r\n                this.drawGradient();\r\n            }\r\n\r\n            initEventListeners() {\r\n                document.getElementById('linearGradient').addEventListener('click', () => this.setGradientType('linear'));\r\n                document.getElementById('radialGradient').addEventListener('click', () => this.setGradientType('radial'));\r\n                \r\n                const angleSlider = document.getElementById('angleSlider');\r\n                angleSlider.addEventListener('input', (e) => this.setAngle(e.target.value));\r\n                \r\n                document.getElementById('addColorStop').addEventListener('click', () => this.addColorStop());\r\n                document.getElementById('copyCSS').addEventListener('click', () => this.copyGradientCSS());\r\n                document.getElementById('saveImage').addEventListener('click', () => this.saveGradientImage());\r\n            }\r\n\r\n            renderColorControls() {\r\n                const container = document.getElementById('colorControls');\r\n                container.innerHTML = '';\r\n\r\n                this.colors.forEach((color, index) => {\r\n                    const colorControl = document.createElement('div');\r\n                    colorControl.className = 'flex items-center space-x-2';\r\n                    colorControl.innerHTML = `\r\n                        <input type=\"color\" value=\"${color}\" class=\"color-picker\" data-index=\"${index}\">\r\n                        <input type=\"text\" value=\"${color}\" class=\"flex-grow border rounded px-2 py-1 text-sm\" readonly>\r\n                        ${this.colors.length > 2 ? `<button class=\"text-red-500 delete-color\" data-index=\"${index}\">\u2715<\/button>` : ''}\r\n                    `;\r\n                    container.appendChild(colorControl);\r\n                });\r\n\r\n                container.querySelectorAll('.color-picker').forEach(picker => {\r\n                    picker.addEventListener('input', (e) => this.updateColor(e.target.dataset.index, e.target.value));\r\n                });\r\n\r\n                container.querySelectorAll('.delete-color').forEach(btn => {\r\n                    btn.addEventListener('click', (e) => this.removeColor(e.target.dataset.index));\r\n                });\r\n            }\r\n\r\n            setGradientType(type) {\r\n                this.gradientType = type;\r\n                document.getElementById('linearGradient').className = type === 'linear' \r\n                    ? 'px-4 py-2 rounded-md bg-blue-500 text-white flex-1 transition hover:bg-blue-600'\r\n                    : 'px-4 py-2 rounded-md bg-gray-200 text-gray-700 flex-1 transition hover:bg-gray-300';\r\n                \r\n                document.getElementById('radialGradient').className = type === 'radial'\r\n                    ? 'px-4 py-2 rounded-md bg-blue-500 text-white flex-1 transition hover:bg-blue-600'\r\n                    : 'px-4 py-2 rounded-md bg-gray-200 text-gray-700 flex-1 transition hover:bg-gray-300';\r\n                \r\n                document.getElementById('angleControl').style.display = type === 'linear' ? 'block' : 'none';\r\n                this.drawGradient();\r\n            }\r\n\r\n            setAngle(angle) {\r\n                this.angle = parseInt(angle);\r\n                document.getElementById('angleDisplay').textContent = `${angle}\u00b0`;\r\n                this.drawGradient();\r\n            }\r\n\r\n            updateColor(index, color) {\r\n                this.colors[index] = color;\r\n                this.renderColorControls();\r\n                this.drawGradient();\r\n            }\r\n\r\n            addColorStop() {\r\n                if (this.colors.length < this.maxColorStops) {\r\n                    this.colors.push('#000000');\r\n                    this.renderColorControls();\r\n                    this.drawGradient();\r\n                } else {\r\n                    alert(`A maximum of ${this.maxColorStops} colors is allowed.`);\r\n                }\r\n            }\r\n\r\n            removeColor(index) {\r\n                if (this.colors.length > 2) {\r\n                    this.colors.splice(index, 1);\r\n                    this.renderColorControls();\r\n                    this.drawGradient();\r\n                }\r\n            }\r\n\r\n            drawGradient() {\r\n                const { width, height } = this.canvas;\r\n                this.ctx.clearRect(0, 0, width, height);\r\n\r\n                let gradient;\r\n                if (this.gradientType === 'linear') {\r\n                    const radAngle = this.angle * Math.PI \/ 180;\r\n                    const centerX = width \/ 2;\r\n                    const centerY = height \/ 2;\r\n                    const length = Math.sqrt(width**2 + height**2);\r\n                    \r\n                    gradient = this.ctx.createLinearGradient(\r\n                        centerX - Math.cos(radAngle) * length\/2, \r\n                        centerY - Math.sin(radAngle) * length\/2,\r\n                        centerX + Math.cos(radAngle) * length\/2, \r\n                        centerY + Math.sin(radAngle) * length\/2\r\n                    );\r\n                } else {\r\n                    gradient = this.ctx.createRadialGradient(\r\n                        width\/2, height\/2, 0, \r\n                        width\/2, height\/2, Math.min(width, height)\/2\r\n                    );\r\n                }\r\n\r\n                this.colors.forEach((color, index) => {\r\n                    gradient.addColorStop(index \/ (this.colors.length - 1), color);\r\n                });\r\n\r\n                this.ctx.fillStyle = gradient;\r\n                this.ctx.fillRect(0, 0, width, height);\r\n\r\n                this.updateGradientCode();\r\n            }\r\n\r\n            updateGradientCode() {\r\n                const gradientCSS = this.generateCSSGradient();\r\n                document.getElementById('gradientCode').textContent = gradientCSS;\r\n            }\r\n\r\n            generateCSSGradient() {\r\n                if (this.gradientType === 'linear') {\r\n                    return `background: linear-gradient(${this.angle}deg, ${this.colors.join(', ')});`;\r\n                }\r\n                return `background: radial-gradient(${this.colors.join(', ')});`;\r\n            }\r\n\r\n            copyGradientCSS() {\r\n                const gradientCSS = this.generateCSSGradient();\r\n                navigator.clipboard.writeText(gradientCSS).then(() => {\r\n                    alert('CSS gradient copied!');\r\n                });\r\n            }\r\n\r\n            saveGradientImage() {\r\n                const link = document.createElement('a');\r\n                link.download = 'gradient.png';\r\n                link.href = this.canvas.toDataURL();\r\n                link.click();\r\n            }\r\n        }\r\n\r\n        \/\/ Initialize the Gradient Generator\r\n        new GradientGenerator();\r\n    <\/script><\/center>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[186],"tags":[],"class_list":["post-1594","post","type-post","status-publish","format-standard","hentry","category-coder"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gradient Color Generator - DonHit<\/title>\n<meta name=\"description\" content=\"Gradient color generators are essential tools in modern design workflows, enabling designers to create seamless color transitions with ease\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gradient Color Generator - DonHit\" \/>\n<meta property=\"og:description\" content=\"Gradient color generators are essential tools in modern design workflows, enabling designers to create seamless color transitions with ease\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"DonHit - World of Tools\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-08T14:22:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T09:45:23+00:00\" \/>\n<meta name=\"author\" content=\"DonHit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DonHit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gradient Color Generator - DonHit","description":"Gradient color generators are essential tools in modern design workflows, enabling designers to create seamless color transitions with ease","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/","og_locale":"en_US","og_type":"article","og_title":"Gradient Color Generator - DonHit","og_description":"Gradient color generators are essential tools in modern design workflows, enabling designers to create seamless color transitions with ease","og_url":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/","og_site_name":"DonHit - World of Tools","article_published_time":"2024-12-08T14:22:02+00:00","article_modified_time":"2025-02-07T09:45:23+00:00","author":"DonHit","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DonHit","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/#article","isPartOf":{"@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/"},"author":{"name":"DonHit","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"headline":"Gradient Color Generator","datePublished":"2024-12-08T14:22:02+00:00","dateModified":"2025-02-07T09:45:23+00:00","mainEntityOfPage":{"@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"articleSection":["Coder"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/","url":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/","name":"Gradient Color Generator - DonHit","isPartOf":{"@id":"https:\/\/donhit.com\/en\/#website"},"datePublished":"2024-12-08T14:22:02+00:00","dateModified":"2025-02-07T09:45:23+00:00","description":"Gradient color generators are essential tools in modern design workflows, enabling designers to create seamless color transitions with ease","breadcrumb":{"@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/donhit.com\/en\/coder\/gradient-color-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/donhit.com\/en\/"},{"@type":"ListItem","position":2,"name":"Coder","item":"https:\/\/donhit.com\/en\/category\/coder\/"},{"@type":"ListItem","position":3,"name":"Gradient Color Generator"}]},{"@type":"WebSite","@id":"https:\/\/donhit.com\/en\/#website","url":"https:\/\/donhit.com\/en\/","name":"DonHit - World of tools","description":"","publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donhit.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148","name":"DonHit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","contentUrl":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","width":400,"height":267,"caption":"DonHit"},"logo":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/"},"description":"DonHit is a website designed to provide useful tools for everyone. Its primary goal is to support and empower the community. All the tools available on the site are completely free to use.","sameAs":["https:\/\/donhit.com\/en"],"url":"https:\/\/donhit.com\/en\/author\/admin_don\/"}]}},"_links":{"self":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/comments?post=1594"}],"version-history":[{"count":3,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1594\/revisions"}],"predecessor-version":[{"id":2258,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1594\/revisions\/2258"}],"wp:attachment":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/media?parent=1594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/categories?post=1594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/tags?post=1594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}