Question 233571 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make a rainbow on a page?

I saw the following website:
Photo:

I was wondering how I create something similar to this? The rainbow effect really got me and I’ve been looking for the past 30 minutes but couldn’t find anything. I basically want circles surrounding from the bottom of the page.

Tags:

3

Answers


  1. 0

    You can do it with a combination of background: radial-gradient and position: relative for the parent and position: absolute for the children and then, using left and top you can position your icons wherever you want. If you use percentages, then it will work on a variety of screens.

    div#container {
    width: 500px;
    height: 500px;
    position: relative;
    background: radial-gradient(circle at 50% 100%, red 0, blue, green, yellow, purple, orange 100%);
}

div#container span {
    position: absolute;
}
    <div id="container">
    <span>1</span>
    <span style="top: 15%; left: 10%;">2</span>
    <span style="top: 25%; left: 20%;">3</span>
    <span style="top: 28%; left: 50%;">4</span>
    <span style="top: 38%; left: 65%;">5</span>
    <span style="top: 50%; left: 25%;">6</span>
    <span style="top: 50%; left: 75%;">7</span>
    <span style="top: 75%; left: 50%;">8</span>
</div>
    Login or Signup to reply.
  2. 0

    If you are looking for pure CSS solutions, then as @cornonthecob recommended the best way would be the gradients approach with hard color stops.

    See the snippet below for a sample implementation.

    body{
  margin:0px;
}
.container > div {
  height: 400px;
}
.container > div {
  background-image: radial-gradient(
    circle at bottom center,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}
    <div class="container">
  <div></div>
</div>
    Login or Signup to reply.
  3. 0

    Following discussions in the comments, I can see you want to add things directly into each part of the rainbow, and also maintain responsiveness.

    So (despite what I said before in the comments, although those solutions would work fine in lots of cases) I would recommend in your scenario to actually use position:static elements and no radial-gradients or absolute positions, but instead to use border-radius and box-shadow to achieve this.

    border-radius in this case makes the top curvy like a rainbow is, and box-shadow fills the gaps that would be in-between the elements normally. I’ve used CSS custom properties to make it neater.

    .one,
.two,
.three,
.four {
  padding: 20px;
  min-height: 60px;
  border-top-left-radius: 50% 50px;
  border-top-right-radius: 50% 50px;
  background: var(--color);
  box-shadow: 0 50px var(--color);
  text-align: center;
}

.one {
  --color: #ff0022;
}

.two {
  --color: #ff3344;
}

.three {
  --color: #335522;
}

.four {
  --color: #992244;
}
    <div class="one">hi</div>
<div class="two">hello everybody</div>
<div class="three">greetings</div>
<div class="four">goodbye</div>

    https://codepen.io/cornonthecob/pen/mdadvgB

    Note that if you want it to look more rainbow-shaped, you should change the border-radius values for each element to perfect the shape, however this is only something you can really do in your actual project once you’ve adapted this solution to your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search