December 3, 2021
Silvia O'Dwyer

How to Add A Triangle Gradient Background to Your Website

Creating Triangle Backgrounds: A Step-by-Step Guide

If you’re hoping to create triangle backgrounds for one of your web pages, you’ve come to the right place! In this guide, we’re going to be taking a look at how to create a gradient triangle background, where the triangles’ colors move from a burgundy color to a darker, purple hue.

Of course, a huge variety of combinations can be created too, from turquoise variants to backgrounds with warmer, summer hues.

Here's the background we'll be making:

Let’s begin!

Getting Started

For this project, we’re going to be using React, but if you'd like to see this tutorial with a different framework, be sure to let me know down in the comments section below!

Firstly, let's create a React project:

  npx create-react-app triangle-background-app

After this has been created, we need to install our dependencies:

  npm install triangulr

Then once our dependencies are installed, it’s time to start up the development server. This will automatically reload the page and apply any changes that were made as we work on our App.js file.

  npm start

After the server is up and running, head over to https://localhost:3000 and you should see the default page, which consists of a spinning logo, but we're soon about to change that!

Adding A Triangle Background

To create our triangle background, we’ll need to import Triangulr.js:

   import Triangulr from 'triangulr'

We'll also be using React refs in this tutorial, so we'll need to import the useRef hook also:

   import React, {useRef, useEffect} from "react";

Then in the JSX for the component, it's time to add a div element, which will be the container for the triangle background:

   <div ref={triangleContainer} id="triangle_background"></div>

In order to add a gradient effect to the triangle background, a function needs to be added which selects a color for the current triangle based on its position. This is then called every time a triangle is created and added to the background, and a hex color code is returned each time.

   var colorRender = function (path) {
    var random = 32;
    var ratio = (path.x + path.y) / (path.cols + path.lines);
    var code = Math.floor(255 - (ratio * (255-random)) - Math.random()*random).toString(16);

    return '#' + code + '1092';

In our useEffect hook, we’ll need to set up a Triangulr instance, get the container where we want to append the background using the ref we set up earlier, and then append the triangle background. The height and width of the background will also need to be set when creating a Triangulr instance, as shown below:

    useEffect(() => {    
      var svg = new Triangulr (window.innerWidth, window.innerHeight * 1.2, 100, 50, colorRender);    
    }, []);

I’ve noticed that some faint lines appear between the triangles, so if you’d like to detract from these somehow, you could do so by placing a gradient background behind the triangles, as so:

  <div ref={triangleContainer} id="triangle_background" style={{background: `linear-gradient(90deg, #C71092 0%, #4A1092 100%)`}}></div>

And voila! The final background looks like this:

Here's our final background! You can also try experimenting with different colors and gradients too, for a wide variety of backgrounds.


Thanks for reading! These triangle backgrounds would look fantastic in a variety of contexts, from hero banners to login screens and signup pages. If you'd like to create variations of this background, you could try out different colors and gradients. For example, you could try a blue and turquoise background, which would look amazing overall!

If you'd like to share your creations, be sure to let us know on Twitter or down in the comments section below. Thanks again!