The rainbows on this page are created with pure CSS. (The large background rainbow is hidden on screens less than 699px – too big to fit nicely on a small screen.) Using DIV’s with transparent backgrounds, colored borders, and border-radii allowed for the curved arch. Box-shadows were used to enhance the appearance of the rainbow. Trying to keep the rainbow on the page when the page is resized was my concern. My solution was to use percentages in the CSS and keep the rainbow in a fixed position. There are probably a number of methods to achieve the rainbow using pure CSS, this was mine.

    The large rainbow will flex with the page size. The height and width will adjust to be the height and the width of the page. Changing the CSS can adjust the size and shape to the desired appearance. The little rainbow is a fixed size. The HTML and CSS code for both are shown below. Please note any CSS animations created here were made for desktop compurers – created before “Mobilegeddon”, and later quick fixed (to the best of our ability) to fit hand held devices.