{"id":114,"date":"2026-06-25T09:49:00","date_gmt":"2026-06-25T09:49:00","guid":{"rendered":"https:\/\/toolskit.site\/?page_id=114"},"modified":"2026-06-25T09:49:01","modified_gmt":"2026-06-25T09:49:01","slug":"professional-css-gradient-generator","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/professional-css-gradient-generator\/","title":{"rendered":"Professional CSS Gradient Generator"},"content":{"rendered":"<style>\r\n:root {\r\n  --primary: #ec4899;\r\n  --primary-dark: #db2777;\r\n  --secondary: #8b5cf6;\r\n  --success: #10b981;\r\n  --warning: #f59e0b;\r\n  --danger: #ef4444;\r\n  --dark: #0f172a;\r\n  --darker: #020617;\r\n  --card: #1e293b;\r\n  --border: #334155;\r\n  --text: #e2e8f0;\r\n  --text-muted: #94a3b8;\r\n}\r\n\r\n#pro-cg * {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#pro-cg {\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n  padding: 40px 20px;\r\n  background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  color: var(--text);\r\n  min-height: 100vh;\r\n}\r\n\r\n#pro-cg .header {\r\n  text-align: center;\r\n  margin-bottom: 40px;\r\n  animation: fadeInDown 0.6s ease;\r\n}\r\n\r\n#pro-cg .header h1 {\r\n  font-size: 48px;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  margin-bottom: 12px;\r\n  letter-spacing: -1px;\r\n}\r\n\r\n#pro-cg .header p {\r\n  color: var(--text-muted);\r\n  font-size: 18px;\r\n}\r\n\r\n#pro-cg .container {\r\n  display: grid;\r\n  grid-template-columns: 400px 1fr;\r\n  gap: 30px;\r\n  animation: fadeIn 0.8s ease;\r\n}\r\n\r\n#pro-cg .sidebar {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n  height: fit-content;\r\n}\r\n\r\n#pro-cg .main-content {\r\n  background: var(--card);\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  border: 1px solid var(--border);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n}\r\n\r\n#pro-cg .section {\r\n  margin-bottom: 25px;\r\n}\r\n\r\n#pro-cg .section-title {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n#pro-cg .type-toggle {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#pro-cg .type-btn {\r\n  padding: 12px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 10px;\r\n  color: var(--text);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-cg .type-btn:hover {\r\n  border-color: var(--primary);\r\n}\r\n\r\n#pro-cg .type-btn.active {\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  border-color: var(--primary);\r\n  color: white;\r\n}\r\n\r\n#pro-cg .input-group {\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-cg .input-group label {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  font-size: 14px;\r\n  color: var(--text);\r\n  margin-bottom: 8px;\r\n  font-weight: 500;\r\n}\r\n\r\n#pro-cg .input-group label span {\r\n  color: var(--primary);\r\n  font-weight: 700;\r\n}\r\n\r\n#pro-cg input[type=\"range\"] {\r\n  width: 100%;\r\n  height: 6px;\r\n  border-radius: 3px;\r\n  background: var(--border);\r\n  outline: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n#pro-cg input[type=\"range\"]::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n  cursor: pointer;\r\n  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n#pro-cg input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n  transform: scale(1.2);\r\n}\r\n\r\n#pro-cg .color-stops {\r\n  max-height: 300px;\r\n  overflow-y: auto;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-cg .color-stop {\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 10px;\r\n  padding: 12px;\r\n  margin-bottom: 10px;\r\n  display: flex;\r\n  gap: 10px;\r\n  align-items: center;\r\n}\r\n\r\n#pro-cg .color-stop input[type=\"color\"] {\r\n  width: 40px;\r\n  height: 40px;\r\n  border: none;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n#pro-cg .color-stop input[type=\"range\"] {\r\n  flex: 1;\r\n}\r\n\r\n#pro-cg .color-stop button {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 8px;\r\n  background: var(--danger);\r\n  border: none;\r\n  color: white;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-cg .color-stop button:hover {\r\n  transform: scale(1.1);\r\n}\r\n\r\n#pro-cg .add-stop-btn {\r\n  width: 100%;\r\n  padding: 12px;\r\n  background: var(--darker);\r\n  border: 2px dashed var(--border);\r\n  border-radius: 10px;\r\n  color: var(--primary);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#pro-cg .add-stop-btn:hover {\r\n  border-color: var(--primary);\r\n  background: rgba(236, 72, 153, 0.1);\r\n}\r\n\r\n#pro-cg .presets {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 8px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#pro-cg .preset {\r\n  aspect-ratio: 1;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-cg .preset:hover {\r\n  border-color: white;\r\n  transform: scale(1.05);\r\n}\r\n\r\n#pro-cg .preview-box {\r\n  width: 100%;\r\n  height: 400px;\r\n  border-radius: 16px;\r\n  border: 1px solid var(--border);\r\n  margin-bottom: 20px;\r\n  transition: background 0.3s ease;\r\n}\r\n\r\n#pro-cg .code-box {\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 12px;\r\n  padding: 20px;\r\n  font-family: 'Courier New', monospace;\r\n  font-size: 13px;\r\n  color: var(--success);\r\n  margin-bottom: 20px;\r\n  min-height: 80px;\r\n  word-break: break-all;\r\n}\r\n\r\n#pro-cg .format-toggle {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n#pro-cg .format-btn {\r\n  padding: 10px;\r\n  background: var(--darker);\r\n  border: 1px solid var(--border);\r\n  border-radius: 8px;\r\n  color: var(--text);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n#pro-cg .format-btn.active {\r\n  background: var(--primary);\r\n  border-color: var(--primary);\r\n  color: white;\r\n}\r\n\r\n#pro-cg .btn {\r\n  width: 100%;\r\n  padding: 16px;\r\n  border: none;\r\n  border-radius: 12px;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n#pro-cg .btn-primary {\r\n  background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n  color: white;\r\n  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);\r\n}\r\n\r\n#pro-cg .btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.4);\r\n}\r\n\r\n#pro-cg .btn-secondary {\r\n  background: var(--darker);\r\n  color: var(--text);\r\n  border: 1px solid var(--border);\r\n}\r\n\r\n#pro-cg .btn-secondary:hover {\r\n  background: var(--border);\r\n}\r\n\r\n#pro-cg .toast {\r\n  position: fixed;\r\n  bottom: 30px;\r\n  right: 30px;\r\n  background: var(--success);\r\n  color: white;\r\n  padding: 16px 24px;\r\n  border-radius: 12px;\r\n  box-shadow: 0 10px 40px rgba(0,0,0,0.3);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  transform: translateX(400px);\r\n  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n  z-index: 10000;\r\n}\r\n\r\n#pro-cg .toast.show {\r\n  transform: translateX(0);\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n@keyframes fadeInDown {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  #pro-cg .container {\r\n    grid-template-columns: 1fr;\r\n  }\r\n  \r\n  #pro-cg .header h1 {\r\n    font-size: 36px;\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  #pro-cg {\r\n    padding: 20px 10px;\r\n  }\r\n  \r\n  #pro-cg .header h1 {\r\n    font-size: 28px;\r\n  }\r\n  \r\n  #pro-cg .sidebar,\r\n  #pro-cg .main-content {\r\n    padding: 20px;\r\n  }\r\n  \r\n  #pro-cg .presets {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pro-cg\">\r\n  <div class=\"header\">\r\n    <h1>\ud83c\udfa8 Professional Gradient Generator<\/h1>\r\n    <p>Create stunning CSS gradients with live preview<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"sidebar\">\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83c\udfaf Gradient Type<\/div>\r\n        <div class=\"type-toggle\">\r\n          <button class=\"type-btn active\" data-type=\"linear\" onclick=\"setType('linear')\">Linear<\/button>\r\n          <button class=\"type-btn\" data-type=\"radial\" onclick=\"setType('radial')\">Radial<\/button>\r\n          <button class=\"type-btn\" data-type=\"conic\" onclick=\"setType('conic')\">Conic<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\" id=\"angle-section\">\r\n        <div class=\"section-title\">\ud83d\udcd0 Angle<\/div>\r\n        <div class=\"input-group\">\r\n          <label>Angle <span id=\"angle-val\">90\u00b0<\/span><\/label>\r\n          <input type=\"range\" id=\"angle\" min=\"0\" max=\"360\" value=\"90\" oninput=\"updateGradient()\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83c\udfa8 Color Stops<\/div>\r\n        <div class=\"color-stops\" id=\"color-stops\"><\/div>\r\n        <button class=\"add-stop-btn\" onclick=\"addColorStop()\">+ Add Color Stop<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\u2728 Presets<\/div>\r\n        <div class=\"presets\" id=\"presets\"><\/div>\r\n      <\/div>\r\n\r\n      <button class=\"btn btn-primary\" onclick=\"copyCSS()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"\/>\r\n        <\/svg>\r\n        Copy CSS Code\r\n      <\/button>\r\n      <button class=\"btn btn-secondary\" onclick=\"downloadPNG()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\/>\r\n        <\/svg>\r\n        Download as PNG\r\n      <\/button>\r\n      <button class=\"btn btn-secondary\" onclick=\"randomGradient()\">\r\n        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\r\n        <\/svg>\r\n        Random Gradient\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udc41\ufe0f Live Preview<\/div>\r\n        <div class=\"preview-box\" id=\"preview\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"section\">\r\n        <div class=\"section-title\">\ud83d\udcbb CSS Code<\/div>\r\n        <div class=\"format-toggle\">\r\n          <button class=\"format-btn active\" data-format=\"hex\" onclick=\"setFormat('hex')\">HEX<\/button>\r\n          <button class=\"format-btn\" data-format=\"rgb\" onclick=\"setFormat('rgb')\">RGB<\/button>\r\n          <button class=\"format-btn\" data-format=\"hsl\" onclick=\"setFormat('hsl')\">HSL<\/button>\r\n        <\/div>\r\n        <div class=\"code-box\" id=\"code-box\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\">\r\n  <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n  <\/svg>\r\n  <span id=\"toast-message\">Success!<\/span>\r\n<\/div>\r\n\r\n<script>\r\nvar gradientState = {\r\n  type: 'linear',\r\n  angle: 90,\r\n  stops: [\r\n    { color: '#ec4899', position: 0 },\r\n    { color: '#8b5cf6', position: 100 }\r\n  ],\r\n  format: 'hex'\r\n};\r\n\r\nvar presets = [\r\n  ['#ec4899', '#8b5cf6'],\r\n  ['#10b981', '#3b82f6'],\r\n  ['#f59e0b', '#ef4444'],\r\n  ['#06b6d4', '#8b5cf6'],\r\n  ['#f43f5e', '#f97316'],\r\n  ['#14b8a6', '#0ea5e9'],\r\n  ['#a855f7', '#ec4899'],\r\n  ['#84cc16', '#22c55e']\r\n];\r\n\r\nfunction setType(type) {\r\n  gradientState.type = type;\r\n  document.querySelectorAll('.type-btn').forEach(function(btn) {\r\n    btn.classList.toggle('active', btn.dataset.type === type);\r\n  });\r\n  document.getElementById('angle-section').style.display = type === 'radial' ? 'none' : 'block';\r\n  updateGradient();\r\n}\r\n\r\nfunction setFormat(format) {\r\n  gradientState.format = format;\r\n  document.querySelectorAll('.format-btn').forEach(function(btn) {\r\n    btn.classList.toggle('active', btn.dataset.format === format);\r\n  });\r\n  updateGradient();\r\n}\r\n\r\nfunction addColorStop() {\r\n  gradientState.stops.push({\r\n    color: getRandomColor(),\r\n    position: 50\r\n  });\r\n  renderColorStops();\r\n  updateGradient();\r\n}\r\n\r\nfunction removeColorStop(index) {\r\n  if (gradientState.stops.length > 2) {\r\n    gradientState.stops.splice(index, 1);\r\n    renderColorStops();\r\n    updateGradient();\r\n  } else {\r\n    showToast('Minimum 2 color stops required', 'error');\r\n  }\r\n}\r\n\r\nfunction renderColorStops() {\r\n  var container = document.getElementById('color-stops');\r\n  container.innerHTML = '';\r\n  \r\n  gradientState.stops.forEach(function(stop, index) {\r\n    var div = document.createElement('div');\r\n    div.className = 'color-stop';\r\n    div.innerHTML = \r\n      '<input type=\"color\" value=\"' + stop.color + '\" onchange=\"updateStopColor(' + index + ', this.value)\">' +\r\n      '<input type=\"range\" min=\"0\" max=\"100\" value=\"' + stop.position + '\" onchange=\"updateStopPosition(' + index + ', this.value)\">' +\r\n      '<button onclick=\"removeColorStop(' + index + ')\">\u00d7<\/button>';\r\n    container.appendChild(div);\r\n  });\r\n}\r\n\r\nfunction updateStopColor(index, color) {\r\n  gradientState.stops[index].color = color;\r\n  updateGradient();\r\n}\r\n\r\nfunction updateStopPosition(index, position) {\r\n  gradientState.stops[index].position = parseInt(position);\r\n  updateGradient();\r\n}\r\n\r\nfunction updateGradient() {\r\n  gradientState.angle = document.getElementById('angle').value;\r\n  document.getElementById('angle-val').textContent = gradientState.angle + '\u00b0';\r\n  \r\n  var css = generateCSS();\r\n  document.getElementById('preview').style.background = css;\r\n  document.getElementById('code-box').textContent = 'background: ' + css + ';';\r\n}\r\n\r\nfunction generateCSS() {\r\n  var stops = gradientState.stops.slice().sort(function(a, b) {\r\n    return a.position - b.position;\r\n  });\r\n  \r\n  var stopsStr = stops.map(function(stop) {\r\n    var color = formatColor(stop.color);\r\n    return color + ' ' + stop.position + '%';\r\n  }).join(', ');\r\n  \r\n  if (gradientState.type === 'linear') {\r\n    return 'linear-gradient(' + gradientState.angle + 'deg, ' + stopsStr + ')';\r\n  } else if (gradientState.type === 'radial') {\r\n    return 'radial-gradient(circle, ' + stopsStr + ')';\r\n  } else {\r\n    return 'conic-gradient(from ' + gradientState.angle + 'deg, ' + stopsStr + ')';\r\n  }\r\n}\r\n\r\nfunction formatColor(hex) {\r\n  if (gradientState.format === 'hex') {\r\n    return hex;\r\n  } else if (gradientState.format === 'rgb') {\r\n    var r = parseInt(hex.slice(1, 3), 16);\r\n    var g = parseInt(hex.slice(3, 5), 16);\r\n    var b = parseInt(hex.slice(5, 7), 16);\r\n    return 'rgb(' + r + ', ' + g + ', ' + b + ')';\r\n  } else if (gradientState.format === 'hsl') {\r\n    var r = parseInt(hex.slice(1, 3), 16) \/ 255;\r\n    var g = parseInt(hex.slice(3, 5), 16) \/ 255;\r\n    var b = parseInt(hex.slice(5, 7), 16) \/ 255;\r\n    var max = Math.max(r, g, b), min = Math.min(r, g, b);\r\n    var h, s, l = (max + min) \/ 2;\r\n    \r\n    if (max === min) {\r\n      h = s = 0;\r\n    } else {\r\n      var d = max - min;\r\n      s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\r\n      switch (max) {\r\n        case r: h = ((g - b) \/ d + (g < b ? 6 : 0)) \/ 6; break;\r\n        case g: h = ((b - r) \/ d + 2) \/ 6; break;\r\n        case b: h = ((r - g) \/ d + 4) \/ 6; break;\r\n      }\r\n    }\r\n    \r\n    return 'hsl(' + Math.round(h * 360) + ', ' + Math.round(s * 100) + '%, ' + Math.round(l * 100) + '%)';\r\n  }\r\n}\r\n\r\nfunction copyCSS() {\r\n  var code = document.getElementById('code-box').textContent;\r\n  navigator.clipboard.writeText(code).then(function() {\r\n    showToast('CSS copied to clipboard!');\r\n  });\r\n}\r\n\r\nfunction downloadPNG() {\r\n  var canvas = document.createElement('canvas');\r\n  canvas.width = 1920;\r\n  canvas.height = 1080;\r\n  var ctx = canvas.getContext('2d');\r\n  \r\n  var stops = gradientState.stops.slice().sort(function(a, b) {\r\n    return a.position - b.position;\r\n  });\r\n  \r\n  var grad;\r\n  if (gradientState.type === 'linear') {\r\n    var angleRad = gradientState.angle * Math.PI \/ 180;\r\n    var x1 = 960 - Math.cos(angleRad) * 960;\r\n    var y1 = 540 - Math.sin(angleRad) * 540;\r\n    var x2 = 960 + Math.cos(angleRad) * 960;\r\n    var y2 = 540 + Math.sin(angleRad) * 540;\r\n    grad = ctx.createLinearGradient(x1, y1, x2, y2);\r\n  } else {\r\n    grad = ctx.createRadialGradient(960, 540, 0, 960, 540, 960);\r\n  }\r\n  \r\n  stops.forEach(function(stop) {\r\n    grad.addColorStop(stop.position \/ 100, stop.color);\r\n  });\r\n  \r\n  ctx.fillStyle = grad;\r\n  ctx.fillRect(0, 0, 1920, 1080);\r\n  \r\n  canvas.toBlob(function(blob) {\r\n    var url = URL.createObjectURL(blob);\r\n    var a = document.createElement('a');\r\n    a.href = url;\r\n    a.download = 'gradient.png';\r\n    a.click();\r\n    URL.revokeObjectURL(url);\r\n    showToast('PNG downloaded!');\r\n  });\r\n}\r\n\r\nfunction randomGradient() {\r\n  gradientState.stops = [\r\n    { color: getRandomColor(), position: 0 },\r\n    { color: getRandomColor(), position: 100 }\r\n  ];\r\n  gradientState.angle = Math.floor(Math.random() * 360);\r\n  document.getElementById('angle').value = gradientState.angle;\r\n  renderColorStops();\r\n  updateGradient();\r\n  showToast('Random gradient generated!');\r\n}\r\n\r\nfunction getRandomColor() {\r\n  return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');\r\n}\r\n\r\nfunction renderPresets() {\r\n  var container = document.getElementById('presets');\r\n  container.innerHTML = '';\r\n  \r\n  presets.forEach(function(preset) {\r\n    var div = document.createElement('div');\r\n    div.className = 'preset';\r\n    div.style.background = 'linear-gradient(135deg, ' + preset[0] + ', ' + preset[1] + ')';\r\n    div.onclick = function() {\r\n      gradientState.stops = [\r\n        { color: preset[0], position: 0 },\r\n        { color: preset[1], position: 100 }\r\n      ];\r\n      renderColorStops();\r\n      updateGradient();\r\n      showToast('Preset applied!');\r\n    };\r\n    container.appendChild(div);\r\n  });\r\n}\r\n\r\nfunction showToast(message, type) {\r\n  var toast = document.getElementById('toast');\r\n  var toastMessage = document.getElementById('toast-message');\r\n  \r\n  toastMessage.textContent = message;\r\n  toast.classList.add('show');\r\n  \r\n  setTimeout(function() {\r\n    toast.classList.remove('show');\r\n  }, 3000);\r\n}\r\n\r\nrenderColorStops();\r\nrenderPresets();\r\nupdateGradient();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-114","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/114","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=114"}],"version-history":[{"count":1,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/114\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}