Javascript CSS Gradient Generator

Publish in Javascript el 20/05/2025 18:51

Inside the Gradient Generator Tool of ArtDraw: How It Works

Hi everyone, I"m the developer behind ArtDraw , a free online graphic design editor that lets you create and edit SVG graphics directly in your browser. One of the tools we"ve recently added — and one of my favorites — is the CSS Gradient Generator .

In this post, I want to walk you through how it"s built, what features it offers, and how it can help designers and developers alike create beautiful gradients without writing any code.

Why Build a Gradient Generator?

While working on UI components for our editor, I noticed how often we needed to generate clean, customizable gradient backgrounds. Writing linear or radial gradients manually with the right syntax can be tricky and time-consuming.

So, I decided to build an interactive tool that would let users:

Choose between linear and radial gradients
Pick start and end colors visually
Adjust direction (angle) or position (for radial)
Preview the result instantly
Get the final CSS code with just one click

The goal was simple: make creating gradients fast, visual, and intuitive.

The Interface Design

I started by designing a minimal but powerful interface using only HTML, CSS, and JavaScript — no frameworks required.

Key UI Components:

Two color pickers <input type="color"> placed side-by-side
A dropdown to select the gradient type (Linear or Radial)
An angle input (for linear gradients)
Additional options for radial gradients:
Origin (e.g., center, top left)
Radius behavior (e.g., closest-side, farthest-corner)

All of these elements are grouped inside conditionally visible sections depending on the selected gradient type.

Behind the Scenes: How the Code Works

The core functionality runs on vanilla JavaScript. When the user clicks the "Generate Gradient" button, the script reads all current settings and builds the appropriate CSS gradient string.

Here’s a simplified version of the logic:

This function dynamically updates both the preview area and the CSS output , giving users instant feedback and usable code.

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Professional Gradient Tool</title>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 8px 20px;
      background: #f4f4f4;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #222;
      margin: 0 0 4px 0;
    }
    .gradient-tool {
      max-width: 600px;
      margin: 0 auto 20px auto;
      padding: 0px 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    .color-pair {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .color-group {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    label {
      display: block;
      margin-top: 4px;
      font-weight: bold;
    }
    input[type="color"]{
        height: 32px;
        padding: 4px;
        width: 100%;
    }
    input[type="number"],
    select,
    input[type="text"] {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 16px;
      box-sizing: border-box;
    }

    button {
      margin-top: 15px;
      padding: 10px;
      width: 100%;
      font-size: 16px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }

    .preview {
      width: 100%;
      height: 150px;
      margin-top: 20px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: linear-gradient(to bottom, #ffffff, #e0e0e0);
    }

    .code-output {
      margin-top: 20px;
      background: #272822;
      color: #f8f8f2;
      padding: 10px;
      border-radius: 4px;
      font-family: monospace;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>

  <h1>CSS Gradient Generator</h1>

  <div class="gradient-tool">
    <div class="color-pair">
        <div class="color-group">
            <label for="color1">Initial Color:</label>
            <input type="color" id="color1" value="#ff0000">
        </div>
    
        <div class="color-group">
            <label for="color2">Final Color:</label>
            <input type="color" id="color2" value="#0000ff">
        </div>
      </div>

    <label for="type">Gradient Type:</label>
    <select id="type" onchange="toggleFields()">
        <option value="linear">Linear</option>
        <option value="radial">Radial (Circular)</option>
    </select>

    <div id="linearOptions">
        <label for="angle">Gradient Angle (degrees):</label>
        <input type="number" id="angle" value="90" min="0" max="360">
    </div>

    <div id="radialOptions" style="display: none;">
        <label for="origin">Origin of the Gradient:</label>
        <select id="origin">
            <option value="center">Center</option>
            <option value="top left">Top Left</option>
            <option value="top right">Top Right</option>
            <option value="bottom left">Bottom Left</option>
            <option value="bottom right">Bottom Right</option>
            <option value="left">Left</option>
            <option value="right">Right</option>
            <option value="top">Top</option>
            <option value="bottom">Down</option>
        </select>

        <label for="radius">Gradient Radius:</label>
        <select id="radius">
            <option value="closest-side">Nearest Side</option>
            <option value="farthest-side">Farthest Side</option>
            <option value="closest-corner">Nearest Corner</option>
            <option value="farthest-corner" selected>Farthest Corner</option>
            <option value="contain">Wrapped Content</option>
            <option value="cover">Cover All</option>
        </select>
    </div>

    <button onclick="generateGradient()">Generate Gradient</button>
  </div>

  <div class="preview" id="gradientPreview"></div>

  <div class="code-output" id="cssCode">Aquí aparecerá el CSS del degradado</div>

  <script>
    function toggleFields() {
      const type = document.getElementById("type").value;
      document.getElementById("linearOptions").style.display = type === "linear" ? "block" : "none";
      document.getElementById("radialOptions").style.display = type === "radial" ? "block" : "none";
    }

    function generateGradient() {
      const color1 = document.getElementById("color1").value;
      const color2 = document.getElementById("color2").value;
      const type = document.getElementById("type").value;

      let gradientCSS = "";

      if (type === "linear") {
        const angle = parseInt(document.getElementById("angle").value);
        gradientCSS = `linear-gradient(${angle}deg, ${color1}, ${color2})`;
      } else {
        const origin = document.getElementById("origin").value;
        const radius = document.getElementById("radius").value;
        gradientCSS = `radial-gradient(circle ${radius} at ${origin}, ${color1}, ${color2})`;
      }

      const preview = document.getElementById("gradientPreview");
      preview.style.backgroundImage = gradientCSS;

      const codeOutput = document.getElementById("cssCode");
      codeOutput.textContent = `background-image: ${gradientCSS};`;
    }

    window.onload = () => {
      toggleFields();
      generateGradient();
    };
  </script>

</body>
</html>

Real-Time Preview & Code Output

One of the most satisfying parts of the tool is the live preview — as soon as the gradient is generated, it appears in a dedicated box above the form.

Below that, the CSS code is displayed in a styled block with a monospace font and syntax-like highlighting. This makes it easy to copy-paste into any project.

Future Improvements

We’re already planning some exciting enhancements:

Support for multiple color stops
Exporting gradients as SVG patterns
Saving favorite gradients for quick reuse
Integration with the main ArtDraw editor for use in shapes and text

Final Thoughts

Building the Gradient Generator has been a fun challenge that shows how small, focused tools can have a big impact on a creative workflow. It’s now live on ArtDraw, and you can try it out for yourself here .

If you’re a designer or developer looking for a quick way to generate modern CSS gradients — whether for websites, buttons, or background designs — I hope you find this tool useful!

As always, feel free to reach out with feedback or ideas for new tools. Happy designing! 🎨