CSS only rainbow

by dreamdealer

HTML

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

CSS

.rainbow {
    margin: 60px;
    width: 200px;
    height: 150px;
    border-radius: 150px 150px 0px 0px;
    box-shadow: 
        0px 0px 0px 10px #63319C,
        0px 0px 0px 20px #319CFF, 
        0px 0px 0px 30px #0000FF, 
        0px 0px 0px 40px #00FF00, 
        0px 0px 0px 50px #FFFF00, 
        0px 0px 0px 60px #FF0000;
    position: relative;
}
.rainbow:after {
    content: "";
    display: block;
    width: 100%;
    padding: 60px;       /* enter the size if the biggest shadow. 60px in this case */
    height: 1px;
    background: #FFFFFF; /* same color as the background of the page */
    position: absolute;
    bottom: -60px;       /* enter the negative size if the biggest shadow. */
    left: -60px;         /* same here */
}