Rainbow Divs

Rainbow Divs

February 7, 2021

example html css

This example uses HTML and CSS to create a border of colored divs.

<!DOCTYPE html>
    <title>Rainbow Divs</title>
      div {
        padding: 25px;
        font-size: 72px;
        text-align: center;
        border: thin solid black;
        color: white;

      .red {
        background-color: red;

      .orange {
        background-color: orange;

      .yellow {
        background-color: yellow;

      .green {
        background-color: #00ff00;

      .blue {
        background-color: blue;

      .violet {
        background-color: purple;
    <div class="red">
      <div class="orange">
        <div class="yellow">
          <div class="green">
            <div class="blue">
              <div class="violet">Happy Coding!</div>

rainbow divs

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Tweak Ideas

  • Create a gradient from different shades of the same color.
  • Add content to each layer of div.

CSS Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!