How to create a color gradient tool in JavaScript

A gradient is a blend of two or more colors that transition smoothly from one to another. Gradients add modern aesthetics to backgrounds, text, buttons, etc.

In CSS, gradients are added as a value of the background property. For example, a simple gradient might look like this:

1	background: linear-gradient(to right, red, pink);

Here, we are creating a linear gradient that transitions from red to pink horizontally. You can also set an angle to control the direction of the gradient. Check out this example:

1	background: linear-gradient(45deg, red, pink);

Here, the gradient transitions from red to pink at a 45-degree angle. To learn more about manipulating gradients with CSS, here’s a quick guide:

What we’re creating in this tutorial

In this tutorial, you will use JavaScript and learn how to create a tool that produces all kinds of CSS gradients. Here are the features of the gradient tool:

A preview element to show the current gradient.

An option to choose between linear or radial gradients.

The ability to add and remove colors from the gradient.

An option to add an angle to the linear gradient.

Ability to copy the generated gradient code.

By the end of the tutorial, you will have something like this:

<br />

HTML: Create the interface

Our gradient tool will have a fairly minimal interface, the markup for which looks like this:

<div class="container">
  <h1>Gradient Generator</h1>
  <div class="preview"></div>

  <div class="gradient-type">
    <label>
      <input type="radio" name="gradient-type" value="linear" checked> Linear
    </label>
    <label>
      <input type="radio" name="gradient-type" value="radial"> Radial
    </label>
  </div>

  <div class="color-control">
    <div class="color-list">
      <!-- colors added here -->
    </div>
    <div class="add-color">
      <button class="add-color-btn">+</button>
    </div>
  </div>
  <div class="slider-wrapper ">
    <div class="slider-content">
      <span>0°</span>
      <span id="angle-value">45°</span>
      <span>360°</span>
    </div>
    <input class="slider" type="range" id="angle" min="0" max="360" value="45" />
  </div>

  <pre id="output"></pre>
  <input type="text" name="" class="css-output">
  
  <button class="copy-css">
    Copy CSS
  </button>
</div>

CSS: Styling the gradient generator

Let’s style our gradient tool. Below are the styles for the body, container, preview and color stop elements:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  font-family: "DM Mono", monospace;
  
}
.container {
  width: 80%;
  max-width: 600px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  border: #f3ecec solid 1px;
  padding: 40px 80px;
}
.preview {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}
.color-control {
  display: flex;
  gap: 25px;
  padding: 20px;
  border-radius: 8px;
}
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.color-list input[type="color"] {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}

.color-stop .add-color {
  width: 60px;
  height: 60px;
}

.add-color-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}

Remove color button

To remove a color from the gradient, a delete icon will appear when hovering over any color picker element.

Here are the styles for that:

.color-stop {
  position: relative;
}
.color-stop:hover .fa-solid.fa-trash-can {
  opacity: 1;
}

.fa-solid.fa-trash-can {
  position: absolute;
  opacity: 0;
  top: -35%;
  left: calc(100% - 20px);
  transform: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: red;
  transition: all 0.3s ease-in-out;
}

Range input

Range input elements can look and behave differently across browsers. To ensure a consistent appearance, it’s important to customize the CSS to ensure the same experience across multiple browsers. Here are the styles for the range slider element

.slider-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  font-family: Arial, sans-serif;
  width: 100%;
}
.slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: #119cec;
  cursor: pointer;
}

.slider-wrapper input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: #119cec;
  cursor: pointer;
}

.slider-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Remaining styles

The rest of the styles will look like this:

.slider-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#output {
  color: #000;
  width: 100%;
  height: 80px;
  padding: 15px;
  border: 1px solid #e7e2e2;
  border-radius: 12px;
}

.css-output {
  display: none;
}

.copy-css {
  color: #fff;
  width: 100%;
  font-size: 1.2rem;
  width: 100%;
  height: 45px;
  background-color: #119cec;
  border-radius: 8px;
  font-weight: 800;
  border: none;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

JavaScript: Construct gradient

The first step as always is to get all the elements that need manipulation.

const slider = document.getElementById("angle");
const sliderValue = document.getElementById("angle-value");
const addColorBtn = document.querySelector(".add-color-btn");
const gradientTypeInputs = document.querySelectorAll('input[name="gradient-type"]');
const sliderContainer = document.querySelector('.slider-wrapper');

Let’s define the colors for the initial gradient preview.

1	let colors = ['#d81848', '#fd26ae', '#0c43c6'];

The colors array will serve as the source of truth for all the gradient colors. All gradients will be generated based on the colors in this array, so we will be adding and removing colors from it .

To add a a gradient to the preview element, apply a gradient transition using the colors from the colors array.

const updateGradient = () => {
  let gradientString;
  const angle = document.getElementById("angle").value;
  const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;
  console.log(gradientType);

  if (gradientType === 'linear') {
    gradientString = `linear-gradient(${angle}deg, ${colors.join(", ")})`;
  } else {
    gradientString = `radial-gradient(circle, ${colors.join(", ")})`;
  }

  const gradientPreview = document.querySelector(".preview");
  gradientPreview.style.background = gradientString;
  document.getElementById(
    "output"
  ).textContent = `.gradient {\n    background: ${gradientString};\n}`;
};

Here, we are setting the background of the preview container to either a linear or radial background depending on the user selection. We are also updating the output to show the code used to generate the gradient.

By default, the linear gradient will be shown because the linear option is checked in the HTML. Additionally, the angle will default to the slider’s default value (45 degrees).

The generated CSS will look like this:

1	.gradient {background: linear-gradient(45deg, #d81848, #fd26ae, #0c43c6);}

Updating values

To ensure the gradient type is updated when the user selects the radial option, let’s add event listeners to the gradient type inputs (input[name="gradient-type"]). This will ensure the generated gradient and code respond to user actions.

gradientTypeInputs.forEach(input => {
  input.addEventListener('change', () => {
    updateGradient();
  });
});

The next feature is to hide the range slider when the radial gradient option is selected.

1	function toggleAngleSlider() {
2	const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;
3	sliderContainer.style.display = gradientType === 'linear' ? 'block' : 'none';
4	}

The toggleAngleSlider() function will be called every time there is a change in gradient selection.

gradientTypeInputs.forEach(input => {
  input.addEventListener('change', () => {
    updateGradient();
    toggleAngleSlider();
  });
});

Update gradient on user selection

We now have a predefined gradient, but we want to allow the user to make their gradient by selecting custom colors. To achieve this, we will display the colors in the colors array as color picker elements.

function initializeGradient() {
  const colorList = document.querySelector(".color-list");
  colorList.innerHTML = "";
  colors.forEach((color, index) => {
    const colorStop = document.createElement("div");
    colorStop.className = "color-stop";

    const colorInput = document.createElement("input");
    colorInput.type = "color";
    colorInput.className = "color-input";
    colorInput.value = color;
    colorInput.dataset.index = index;
    colorInput.addEventListener("input", (e) =>
      updateColor(e.target.dataset.index, e.target.value)
    );

    const removeButton = document.createElement("i");
    removeButton.className = "fa-solid fa-trash-can";

    colorStop.appendChild(colorInput);
    colorStop.appendChild(removeButton);
    colorList.appendChild(colorStop);
  });

The main purpose of this function is to dynamically create color picker elements in the UI based on the colors array. For each color in the array, we are creating a native <input type="color"> element allowing users to select custom gradient colors.

In addition to creating color pickers, we have also added a remove icon to each input element to ensure a color can be removed from the gradient.

We have also attached an event listener that listens for any changes in each color picker element. When an input change occurs, the updateColor() function is invoked. Add the updateColor() function.

1	function updateColor(index, color) {
2	colors[index] = color;
3	updateGradient();
4	}

This function will get the current index and update the color at that index to the newly selected color; This ensures the gradient is updated to reflect the selected colors.

Now, the user can choose custom colors for their gradient.

Add and remove colors from a gradient

Next to the color pickers, there’s a + button for adding new colors.

To enable its functionality, we need to add an event listener to the button so that when the button is clicked, it will trigger the addition of a new color to the colors array.

function addColorStop() {
  if (colors.length >= 6) {
    alert("Maximum 6 colors allowed!");
    return;
  }
  colors.push("#ffffff");
  initializeGradient();
}

To remove a color from the gradient, we simply remove it from the array and reinitialize the gradient. Reinitializing the gradient will create a new gradient using the updated colors array.

function removeColorStop(index) {
  if (colors.length > 2) {
    colors.splice(index, 1);
    initializeGradient();
  } else {
    alert("Minimum 2 colors required!");
  }
}

As you can see, when adding and removing colors to the gradient, we also need to ensure the user can’t add more than 6 colors and that there must be at least 2 colors to create a gradient.

Copy generated gradient code

The last feature is to add the ability to copy the generated code. We will add an event listener to the copy CSS button. When a user clicks the button the generated code will be copied to the clipboard.

const copyCssBtn = document.querySelector(".copy-css");
copyCssBtn.addEventListener("click", () => {
  const gradientCode = document.getElementById("output")
 
  navigator.clipboard
    .writeText(gradientCode.textContent)
    .then(() => alert("CSS copied to clipboard!"))
    .catch((err) => console.error("Failed to copy: ", err));
});
})

Here is the final demo! Have fun creating your gradients