toolbox/gradient-generator.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free CSS Gradient Generator — Linear, Radial & Conic</title>
  <meta name="description" content="Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients. Copy CSS code instantly. Free online gradient generator.">
  <link rel="canonical" href="https://www.quicktools.mom/gradient-generator.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/gradient-generator.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"🎨 Preset Gradients


    Ad Space — 336×280

          <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About CSS Gradient Generator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">CSS Gradient Generator is a free, browser-based tool built for developers, content creators, and marketers. Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients. Copy CSS code instantly. Free online gradient generator. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    Frequently Asked Questions
      What's the difference between linear, radial, and conic gradients?","acceptedAnswer":{"@type":"Answer","text":"Linear gradients transition along a straight line (e.g., left to right). Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients rotate around a center point, creating pie-chart-like effects."}},{"@type":"Question","name":"Are CSS gradients supported in all browsers?","acceptedAnswer":{"@type":"Answer","text":"Yes, CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed anymore."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">🎨 Design</div>
      <h1>CSS Gradient Generator</h1>
      <p>Create stunning CSS gradients visually. Copy the code, use it anywhere.</p>
    </div>
    <div class="tool-card">
      <div id="gradientPreview" style="width:100%; height:200px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:1.5rem; transition: background 0.3s;"></div>
      <div class="controls-row">
        <div class="control-group"><label>Type</label><select id="gradType" onchange="update()"><option value="linear">Linear</option><option value="radial">Radial</option><option value="conic">Conic</option></select></div>
        <div class="control-group"><label>Angle: <strong id="angleVal">135</strong>°</label><input type="range" id="angle" min="0" max="360" value="135" oninput="document.getElementById('angleVal').textContent=this.value; update()"></div>
      </div>
      <div class="mt-2">
        <label>Color Stops</label>
        <div id="stopsContainer"></div>
        <button class="btn btn-secondary mt-1" onclick="addStop()" style="font-size:0.8rem;">+ Add Color Stop</button>
      </div>
      <div class="output-area mt-3">
        <span class="output-label">CSS Code</span>
        <pre id="cssOutput" style="font-size:0.85rem;"></pre>
        <button class="copy-btn" onclick="copyCSS()">Copy</button>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem; margin-bottom:1rem;">🎨 Preset Gradients</h3>
      <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:0.5rem;" id="presets"></div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section">
      <h2>Frequently Asked Questions</h2>
      <div class="faq-item"><h3>What's the difference between linear, radial, and conic gradients?</h3><p>Linear gradients transition along a straight line (e.g., left to right). Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients rotate around a center point, creating pie-chart-like effects.</p></div>
      <div class="faq-item"><h3>Are CSS gradients supported in all browsers?</h3><p>Yes, CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed anymore.</p></div>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a>
      <a href="favicon-generator.html"><span class="tool-icon">🖼️</span> Favicon Generator</a>
      <a href="css-shadow.html"><span class="tool-icon">🌑</span> Box Shadow</a>
      <a href="meta-tags.html"><span class="tool-icon">🏷️</span> Meta Tag Generator</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    let stops = [{color:'#6366f1',pos:0},{color:'#a78bfa',pos:50},{color:'#ec4899',pos:100}];
    const presetGradients = [
      {name:'Sunset',stops:[{color:'#ff6b6b',pos:0},{color:'#feca57',pos:100}]},
      {name:'Ocean',stops:[{color:'#667eea',pos:0},{color:'#764ba2',pos:100}]},
      {name:'Mint',stops:[{color:'#00b09b',pos:0},{color:'#96c93d',pos:100}]},
      {name:'Fire',stops:[{color:'#f12711',pos:0},{color:'#f5af19',pos:100}]},
      {name:'Night',stops:[{color:'#0f0c29',pos:0},{color:'#302b63',pos:50},{color:'#24243e',pos:100}]},
      {name:'Peach',stops:[{color:'#ffecd2',pos:0},{color:'#fcb69f',pos:100}]},
      {name:'Cyber',stops:[{color:'#00f260',pos:0},{color:'#0575e6',pos:100}]},
      {name:'Aurora',stops:[{color:'#a18cd1',pos:0},{color:'#fbc2eb',pos:100}]},
      {name:'Steel',stops:[{color:'#485563',pos:0},{color:'#29323c',pos:100}]},
      {name:'Coral',stops:[{color:'#ff9a9e',pos:0},{color:'#fad0c4',pos:100}]},
      {name:'Neon',stops:[{color:'#f953c6',pos:0},{color:'#b91d73',pos:100}]},
      {name:'Forest',stops:[{color:'#134e5e',pos:0},{color:'#71b280',pos:100}]},
    ];

    function renderStops() {
      document.getElementById('stopsContainer').innerHTML = stops.map((s,i) =>
        `<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
          <input type="color" value="${s.color}" onchange="stops[${i}].color=this.value; update()" style="width:40px;height:32px;border:none;cursor:pointer;">
          <input type="range" min="0" max="100" value="${s.pos}" oninput="stops[${i}].pos=+this.value; update()" style="flex:1;">
          <span class="text-muted" style="font-size:0.8rem;width:35px;">${s.pos}%</span>
          ${stops.length > 2 ? `<button onclick="stops.splice(${i},1);renderStops();update()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1.1rem;">×</button>` : ''}
        </div>`
      ).join('');
    }

    function addStop() {
      stops.push({color:'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0'), pos: 50});
      renderStops(); update();
    }

    function getGradientCSS() {
      const type = document.getElementById('gradType').value;
      const angle = document.getElementById('angle').value;
      const colorStops = stops.sort((a,b)=>a.pos-b.pos).map(s => `${s.color} ${s.pos}%`).join(', ');
      if (type === 'linear') return `linear-gradient(${angle}deg, ${colorStops})`;
      if (type === 'radial') return `radial-gradient(circle, ${colorStops})`;
      return `conic-gradient(from ${angle}deg, ${colorStops})`;
    }

    function update() {
      const css = getGradientCSS();
      document.getElementById('gradientPreview').style.background = css;
      document.getElementById('cssOutput').textContent = `background: ${css};`;
    }

    function copyCSS() {
      navigator.clipboard.writeText(document.getElementById('cssOutput').textContent).then(()=>{
        const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000);
      });
    }

    // Render presets
    document.getElementById('presets').innerHTML = presetGradients.map((p,i) => {
      const css = `linear-gradient(135deg, ${p.stops.map(s=>`${s.color} ${s.pos}%`).join(', ')})`;
      return `<div style="height:60px;border-radius:8px;cursor:pointer;background:${css};transition:transform 0.2s;" title="${p.name}" onclick="stops=[...presetGradients[${i}].stops.map(s=>({...s}))]; renderStops(); update();" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'"></div>`;
    }).join('');

    renderStops(); update();
  </script>
<script src="ads.js"></script>
</body>
</html>