home / guides

How to Make a rainbow with just CSS and HTML

In this document you will learn to make the above rainbow only using CSS.

How To . . .

Think of CSS as the ability to place shapes on your blank HTML page.

A rainbow is arches, but how do you make an arch shape in CSS?

like most things in CSS you just make borders or backgrounds layered, and smoothed till it looks something like the shape you wanted. Lets get started.

Step 1 - Make a box

Start by making a class rainbow and adding it to any old HTML element. Make the class have another class wrapping it, as a container. This container will be how we position the shape, and control how much of it is displayed. We will start with the two classes rainbow-container and rainbow inside of it. Add a width and height to the container so we can have it as a standard size.

Because we are going to do multiple boxes, layered, an easy way of doing this is to use drop-shadow.

HTML

<div class="rainbow-container">
  <div class="rainbow"></div>
</div>

CSS

.rainbow-container {
  width: 500px;
  height: 200px;
  margin: auto;
  padding: 0;
}

.rainbow {
  position: relative;
  left: 200px;
  width: 1vw;
  height: 2vh;
  background: transparent;
  box-shadow:
    0 0 0 1vw #E7484F, // 1vw width
    0 0 0 2vw #F68B1D, // 1vw width
}

You should see a single box like above

Step 2 - Make those Boxes Circles

CSS

.rainbow {
  position: relative;
  left: 200px;
  width: 1vw;
  height: 2vh;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1vw #E7484F, // 1vw width
    0 0 0 2vw #F68B1D, // 1vw width
}

Step 3 - Make more circles

CSS

.rainbow {
  position: relative;
  width: 1vw;
  height: 2vh;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1vw #E7484F, // 1vw width
    0 0 0 2vw #F68B1D, // 1vw width
    0 0 0 3vw #FCED00, // 1vw width
    0 0 0 4vw #009E4F, // 1vw width
    0 0 0 5vw #00AAC3, // 1vw width
    0 0 0 6vw #732982; // 1vw width
}

Step 4 - Cut those Circles in half

then cut them in half by turning off overflow, and moving the object slightly down, so the bounding box of the object is off-center, only showing half of it. and . . .

HTML

<div class="rainbow-container">
  <div class="rainbow"></div>
</div>

CSS

// Put this around the rainbow
.rainbow-container {
  width: 500px;
  height: 200px;
  margin: auto;
  padding: 0;
  overflow: hidden;
}

.rainbow {
  position: relative;
  top: 190px;
  left: 200px;
  width: 1vw;
  height: 2vh;
  border-radius: 50%;
  background: transparent;
  /** This shadow box adds 1vw width strips **/
  box-shadow:
    0 0 0 1vw #E7484F, // 1vw width
    0 0 0 2vw #F68B1D, // 1vw width
    0 0 0 3vw #FCED00, // 1vw width
    0 0 0 4vw #009E4F, // 1vw width
    0 0 0 5vw #00AAC3, // 1vw width
    0 0 0 6vw #732982; // 1vw width
}

Voilà . . . AN ARCH

Full Rainbow Example

Full Rainbow Example Code

HTML

<div class="rainbow-container">
  <div class="rainbow-pride"></div>
</div>

SCSS

/** Happy Pride Month Rainbow Colors **/
$theme-pride-one:                     #FBF9F5;
$theme-pride-two:                     #FEAEC7;
$theme-pride-three:                   #75D7EF;
$theme-pride-four:                    #613A15;
$theme-pride-five:                    #101010;
$theme-pride-six:                     #E7484F;
$theme-pride-seven:                   #F68B1D;
$theme-pride-eight:                   #FCED00;
$theme-pride-nine:                    #009E4F;
$theme-pride-ten:                     #00AAC3;
$theme-pride-eleven:                  #732982;

// Put this around the rainbow
.rainbow-container {
  width: 500px;
  height: 200px;
  margin: auto;
  padding: 0;
  overflow: hidden;
}

.rainbow-pride {
  position: relative;
  top: 190px;
  left: 200px;
  width: 1vw;
  height: 2vh;
  background: transparent;
  border-radius: 50%;
  /** This shadow box adds 0.5vw and 1vw width strips **/
  box-shadow:
    0 0 0 0.5vw $theme-pride-one,   // 0.5vw width
    0 0 0 1vw   $theme-pride-two,   // 0.5vw width
    0 0 0 1.5vw $theme-pride-three, // 0.5vw width
    0 0 0 2vw   $theme-pride-four,  // 0.5vw width
    0 0 0 2.5vw $theme-pride-five,  // 1vw width
    0 0 0 3.5vw $theme-pride-six,   // 1vw width
    0 0 0 4.5vw $theme-pride-seven, // 1vw width
    0 0 0 5.5vw $theme-pride-eight, // 1vw width
    0 0 0 6.5vw $theme-pride-nine,  // 1vw width
    0 0 0 7.5vw $theme-pride-ten,   // 1vw width
    0 0 0 8.5vw $theme-pride-eleven;// 1vw width
}

// or that rainbow on the top
.guide-rainbow-top {
  position: relative;
  top: 190px;
  left: 200px;
  width: 1vw;
  height: 2vh;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1vw #F0C71D, // 1vw width
    0 0 0 2vw #EA9F1C, // 1vw width
    0 0 0 3vw #D45E20, // 1vw width
    0 0 0 4vw #DF453B, // 1vw width
    0 0 0 5vw #C82F3E, // 1vw width
}

NOTES

Read more about the history of pride month and the history of the Stonewall uprising:

Read more about the history of why the LGBT+ flag has the colors it does:

Read more about VW and VH size measurements in the browser Here at MDN, they really are great!

⬅️ Back to Guides