{"id":90,"date":"2026-06-25T08:56:56","date_gmt":"2026-06-25T08:56:56","guid":{"rendered":"https:\/\/toolskit.site\/index.php\/css-gradient-generator\/"},"modified":"2026-06-25T09:18:36","modified_gmt":"2026-06-25T09:18:36","slug":"css-gradient-generator","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/css-gradient-generator\/","title":{"rendered":"CSS Gradient Generator"},"content":{"rendered":"<div class=\"hth-single-tool-shell\" style=\"--hth-color:#ff0080\">\n<div id=\"cg-wrapper\">\n<style>#cg-wrapper{width:100%;max-width:1200px;box-sizing:border-box;margin:0 auto;overflow:hidden;position:relative}#cg-wrapper *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif}#cg-wrapper{background:#1a1a2e;color:#e0e0e0;padding:24px;border-radius:16px;border:1px solid #333}#cg-wrapper .cg-content{position:relative;z-index:1}#cg-wrapper .cg-header{text-align:center;margin-bottom:24px}#cg-wrapper .cg-title{font-size:28px;font-weight:800;color:#ff0080;margin-bottom:8px}#cg-wrapper .cg-subtitle{color:#888;font-size:14px}#cg-wrapper .cg-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:24px}@media(max-width:900px){#cg-wrapper .cg-grid{grid-template-columns:1fr}}#cg-wrapper .cg-panel{background:#0a0a12;border:1px solid #222;border-radius:12px;padding:20px}#cg-wrapper .cg-panel-title{font-size:16px;color:#ff0080;margin-bottom:16px;font-weight:700}#cg-wrapper .cg-type-toggle,#cg-wrapper .cg-format-toggle{display:flex;background:#12121a;border-radius:8px;overflow:hidden;border:1px solid #333;margin-bottom:20px}#cg-wrapper .cg-type-btn,#cg-wrapper .cg-format-btn{flex:1;padding:10px;background:transparent;border:none;color:#888;font-size:13px;font-weight:600;cursor:pointer}#cg-wrapper .cg-type-btn.active,#cg-wrapper .cg-format-btn.active{background:linear-gradient(135deg,#ff0080,#7928ca);color:#fff}#cg-wrapper .cg-field{margin-bottom:16px}#cg-wrapper .cg-label{display:flex;justify-content:space-between;font-size:13px;color:#aaa;margin-bottom:6px;font-weight:600}#cg-wrapper .cg-range{width:100%;accent-color:#ff0080}#cg-wrapper .cg-stops{margin-bottom:20px;max-height:200px;overflow-y:auto}#cg-wrapper .cg-stop{background:#12121a;border:1px solid #2a2a35;border-radius:8px;padding:12px;margin-bottom:10px;display:flex;gap:10px;align-items:center}#cg-wrapper .cg-stop-color{width:36px;height:36px;border:none;border-radius:6px;cursor:pointer}#cg-wrapper .cg-stop-range{flex:1;accent-color:#7928ca}#cg-wrapper .cg-stop-del{background:transparent;border:1px solid #333;color:#ff4444;width:30px;height:30px;border-radius:6px;cursor:pointer}#cg-wrapper .cg-stop-del:hover{border-color:#ff4444}#cg-wrapper .cg-add-stop{width:100%;padding:10px;background:rgba(255,0,128,0.1);border:1px dashed #ff0080;border-radius:8px;color:#ff0080;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:20px}#cg-wrapper .cg-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px;margin-bottom:20px}#cg-wrapper .cg-preset{width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid transparent}#cg-wrapper .cg-preset:hover{border-color:#fff}#cg-wrapper .cg-preview-box{width:100%;height:250px;border-radius:12px;border:1px solid #222;margin-bottom:20px}#cg-wrapper .cg-code-box{background:#05050a;border:1px solid #222;border-radius:8px;padding:16px;font-family:monospace;font-size:13px;color:#00ff88;white-space:pre-wrap;word-break:break-all;min-height:60px;margin-bottom:20px}#cg-wrapper .cg-history{margin-top:20px;border-top:1px solid #222;padding-top:16px}#cg-wrapper .cg-history-list{display:flex;flex-wrap:wrap;gap:8px}#cg-wrapper .cg-history-item{width:40px;height:40px;border-radius:8px;cursor:pointer;border:2px solid transparent}#cg-wrapper .cg-history-item:hover{border-color:#fff}#cg-wrapper .cg-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}#cg-wrapper .cg-btn{padding:10px 18px;border-radius:8px;border:1px solid #333;background:#12121a;color:#ccc;font-size:14px;font-weight:600;cursor:pointer}#cg-wrapper .cg-btn:hover{border-color:#ff0080;color:#ff0080}#cg-wrapper .cg-btn-primary{background:rgba(255,0,128,0.1);border-color:#ff0080;color:#ff0080}@media(max-width:600px){#cg-wrapper{padding:16px}#cg-wrapper .cg-title{font-size:22px}}<\/style>\n<div class=\"cg-content\">\n<div class=\"cg-header\">\n<h2 class=\"cg-title\">CSS Gradient Generator<\/h2>\n<p class=\"cg-subtitle\">Create, Save &#038; Export beautiful CSS gradients visually.<\/p>\n<\/div>\n<div class=\"cg-grid\">\n<div class=\"cg-panel\">\n<div class=\"cg-panel-title\">Configuration<\/div>\n<div class=\"cg-type-toggle\"><button class=\"cg-type-btn active\" data-type=\"linear\" onclick=\"setCGType('linear')\">Linear<\/button><button class=\"cg-type-btn\" data-type=\"radial\" onclick=\"setCGType('radial')\">Radial<\/button><button class=\"cg-type-btn\" data-type=\"conic\" onclick=\"setCGType('conic')\">Conic<\/button><\/div>\n<div class=\"cg-field\" id=\"cg-angle-field\">\n<div class=\"cg-label\"><span>Angle<\/span><span id=\"cg-angle-val\">90<\/span><\/div>\n<p><input type=\"range\" class=\"cg-range\" id=\"cg-angle\" min=\"0\" max=\"360\" value=\"90\" oninput=\"updateCGAngle()\"><\/div>\n<div class=\"cg-panel-title\" style=\"margin-top:10px;\">Color Stops<\/div>\n<div class=\"cg-stops\" id=\"cg-stops\"><\/div>\n<p><button class=\"cg-add-stop\" onclick=\"addCGStop()\">+ Add Color Stop<\/button><\/p>\n<div class=\"cg-panel-title\" style=\"margin-top:20px;\">Presets<\/div>\n<div class=\"cg-presets\" id=\"cg-presets\"><\/div>\n<div class=\"cg-history\">\n<div class=\"cg-panel-title\" style=\"margin-bottom:10px;\">Saved History<\/div>\n<div class=\"cg-history-list\" id=\"cg-history-list\"><\/div>\n<\/div>\n<\/div>\n<div class=\"cg-panel\">\n<div class=\"cg-panel-title\">Live Preview<\/div>\n<div class=\"cg-preview-box\" id=\"cg-preview\"><\/div>\n<p><label style=\"display:flex;align-items:center;gap:8px;font-size:13px;color:#ccc;cursor:pointer;margin-bottom:20px;\"><input type=\"checkbox\" id=\"cg-noise\" style=\"accent-color:#ff0080;width:16px;height:16px;\" onchange=\"updateCGPreview()\">Add Noise Texture Overlay<\/label><\/p>\n<div class=\"cg-panel-title\">CSS Code<\/div>\n<div class=\"cg-format-toggle\"><button class=\"cg-format-btn active\" data-fmt=\"hex\" onclick=\"setCGFormat('hex')\">HEX<\/button><button class=\"cg-format-btn\" data-fmt=\"rgb\" onclick=\"setCGFormat('rgb')\">RGB<\/button><button class=\"cg-format-btn\" data-fmt=\"hsl\" onclick=\"setCGFormat('hsl')\">HSL<\/button><\/div>\n<div class=\"cg-code-box\" id=\"cg-code\"><\/div>\n<\/div>\n<\/div>\n<div class=\"cg-actions\"><button class=\"cg-btn cg-btn-primary\" onclick=\"copyCGCSS()\">Copy CSS<\/button><button class=\"cg-btn\" onclick=\"downloadCGPNG()\">Download PNG<\/button><button class=\"cg-btn\" onclick=\"saveCGHistory()\">Save to History<\/button><button class=\"cg-btn\" onclick=\"randomCG()\">Random<\/button><\/div>\n<\/div>\n<p><script>var cgState={type:'linear',angle:90,stops:[{color:'#ff0080',pos:0},{color:'#7928ca',pos:100}],format:'hex'};var cgPresets=[['#ff0080','#7928ca'],['#00f5ff','#b026ff'],['#00ff88','#00f5ff'],['#ffa500','#ff0080'],['#1a1a2e','#0f0f1a']];function setCGType(type){cgState.type=type;document.querySelectorAll('.cg-type-btn').forEach(function(b){b.classList.remove('active');});document.querySelector('[data-type=\"'+type+'\"]').classList.add('active');document.getElementById('cg-angle-field').style.display=type==='radial'?'none':'block';updateCGPreview();}function setCGFormat(fmt){cgState.format=fmt;document.querySelectorAll('.cg-format-btn').forEach(function(b){b.classList.remove('active');});document.querySelector('[data-fmt=\"'+fmt+'\"]').classList.add('active');updateCGPreview();}function updateCGAngle(){cgState.angle=document.getElementById('cg-angle').value;document.getElementById('cg-angle-val').textContent=cgState.angle;updateCGPreview();}function addCGStop(){cgState.stops.push({color:randomCGColor(),pos:50});renderCGStops();updateCGPreview();}function renderCGStops(){var container=document.getElementById('cg-stops');container.innerHTML='';cgState.stops.forEach(function(stop,idx){var div=document.createElement('div');div.className='cg-stop';div.innerHTML='<input type=\"color\" class=\"cg-stop-color\" value=\"'+stop.color+'\" onchange=\"updateCGStopColor('+idx+',this.value)\"><input type=\"range\" class=\"cg-stop-range\" min=\"0\" max=\"100\" value=\"'+stop.pos+'\" onchange=\"updateCGStopPos('+idx+',this.value)\"><button class=\"cg-stop-del\" onclick=\"removeCGStop('+idx+')\">X<\/button>';container.appendChild(div);});}function updateCGStopColor(idx,color){cgState.stops[idx].color=color;updateCGPreview();}function updateCGStopPos(idx,pos){cgState.stops[idx].pos=pos;updateCGPreview();}function removeCGStop(idx){if(cgState.stops.length>2){cgState.stops.splice(idx,1);renderCGStops();updateCGPreview();}else{alert('Min 2 stops!');}}function renderCGPresets(){var container=document.getElementById('cg-presets');container.innerHTML='';cgPresets.forEach(function(p){var div=document.createElement('div');div.className='cg-preset';div.style.background='linear-gradient(135deg, '+p[0]+', '+p[1]+')';div.onclick=function(){cgState.stops=[{color:p[0],pos:0},{color:p[1],pos:100}];renderCGStops();updateCGPreview();};container.appendChild(div);});}function renderCGHistory(){var saved=JSON.parse(localStorage.getItem('cg_history')||'[]');var container=document.getElementById('cg-history-list');container.innerHTML='';saved.forEach(function(item){var div=document.createElement('div');div.className='cg-history-item';div.style.background=item.css;div.onclick=function(){cgState.type=item.type;cgState.angle=item.angle;cgState.stops=item.stops;document.querySelectorAll('.cg-type-btn').forEach(function(b){b.classList.toggle('active',b.dataset.type===cgState.type);});document.getElementById('cg-angle').value=cgState.angle;document.getElementById('cg-angle-val').textContent=cgState.angle;renderCGStops();updateCGPreview();};container.appendChild(div);});}function formatCGColor(hex){if(cgState.format==='rgb')return hexToCGRgb(hex);if(cgState.format==='hsl')return hexToCGHsl(hex);return hex;}function hexToCGRgb(hex){var r=parseInt(hex.slice(1,3),16);var g=parseInt(hex.slice(3,5),16);var b=parseInt(hex.slice(5,7),16);return'rgb('+r+', '+g+', '+b+')';}function hexToCGHsl(hex){var r=parseInt(hex.slice(1,3),16)\/255;var g=parseInt(hex.slice(3,5),16)\/255;var b=parseInt(hex.slice(5,7),16)\/255;var max=Math.max(r,g,b),min=Math.min(r,g,b);var h,s,l=(max+min)\/2;if(max===min){h=s=0;}else{var d=max-min;s=l>0.5?d\/(2-max-min):d\/(max+min);switch(max){case r:h=((g-b)\/d+(g<b?6:0))\/6;break;case g:h=((b-r)\/d+2)\/6;break;case b:h=((r-g)\/d+4)\/6;break;}}return'hsl('+Math.round(h*360)+', '+Math.round(s*100)+'%, '+Math.round(l*100)+'%)';}function generateCGCSS(){var stopsStr=cgState.stops.sort(function(a,b){return a.pos-b.pos;}).map(function(s){return formatCGColor(s.color)+' '+s.pos+'%';}).join(', ');if(cgState.type==='linear')return'linear-gradient('+cgState.angle+'deg, '+stopsStr+')';if(cgState.type==='radial')return'radial-gradient(circle, '+stopsStr+')';return'conic-gradient(from '+cgState.angle+'deg, '+stopsStr+')';}function updateCGPreview(){var css=generateCGCSS();document.getElementById('cg-preview').style.background=css;document.getElementById('cg-code').textContent='background: '+css+';';}function copyCGCSS(){navigator.clipboard.writeText(document.getElementById('cg-code').textContent).then(function(){alert('CSS Copied!');});}function downloadCGPNG(){var canvas=document.createElement('canvas');canvas.width=1920;canvas.height=1080;var ctx=canvas.getContext('2d');var grad;var stops=cgState.stops.sort(function(a,b){return a.pos-b.pos;});if(cgState.type==='linear'){var angleRad=cgState.angle*Math.PI\/180;grad=ctx.createLinearGradient(960-Math.cos(angleRad)*960,540-Math.sin(angleRad)*540,960+Math.cos(angleRad)*960,540+Math.sin(angleRad)*540);}else{grad=ctx.createRadialGradient(960,540,0,960,540,960);}stops.forEach(function(s){grad.addColorStop(s.pos\/100,s.color);});ctx.fillStyle=grad;ctx.fillRect(0,0,1920,1080);canvas.toBlob(function(blob){var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='gradient.png';a.click();URL.revokeObjectURL(url);alert('Downloaded!');});}function saveCGHistory(){var saved=JSON.parse(localStorage.getItem('cg_history')||'[]');saved.unshift({type:cgState.type,angle:cgState.angle,stops:cgState.stops,css:generateCGCSS()});if(saved.length>10)saved=saved.slice(0,10);localStorage.setItem('cg_history',JSON.stringify(saved));renderCGHistory();alert('Saved!');}function randomCG(){cgState.stops=[{color:randomCGColor(),pos:0},{color:randomCGColor(),pos:100}];cgState.angle=Math.floor(Math.random()*360);document.getElementById('cg-angle').value=cgState.angle;document.getElementById('cg-angle-val').textContent=cgState.angle;renderCGStops();updateCGPreview();}function randomCGColor(){return'#'+Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');}renderCGStops();renderCGPresets();renderCGHistory();updateCGPreview();<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Create, Save &#038; Export beautiful CSS gradients visually.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":2,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":100,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/90\/revisions\/100"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}