Cloudy sky uses 5 overlapping radial gradients, each a different size and opacity, to for the cloudy shapes, blended together with a final linear gradient that also lightens the top portion of the page. repeat-x keeps the clouds (and lighter sky) at the top of the page. two of the radial gradients repeat from right to left to change the way they all overlap a little.
Increasing the number of radial gradients would make more complex clouds. Introducing grayer edges in the fuzzy edges of the clouds would give more depth and definition where they overlap. Positioning some of the radial gradients to the right (so they repeat right to left) changes the way they overlap a little and lends a parallax effect while the screen (or container) is resized.
.cottonyClouds {
background:#69c; /* the blue for the rest of the page. Only this will show in very old browsers */
background-image: /* Safari 5.1 to 6.0 */
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 44%, rgba(248,252,254,0) 66%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.4) 34%, rgba(248,252,254,0) 58%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.2) 44%, rgba(248,252,254,0) 68%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 37%, rgba(248,252,254,0) 52%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.4) 24%, rgba(248,252,254,0) 40%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(255,255,255,.9) 30px, rgba(255,255,255,.7) 80px, rgba(255,255,255,.4) 96px, rgba(255,255,255,0) 80%);
background-image: /* For Opera 11.6 to 12.0 */
-o-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 44%, rgba(248,252,254,0) 66%, rgba(248,252,254,0) 100%),
-o-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.4) 34%, rgba(248,252,254,0) 58%, rgba(248,252,254,0) 100%),
-o-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.2) 44%, rgba(248,252,254,0) 68%, rgba(248,252,254,0) 100%),
-o-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 37%, rgba(248,252,254,0) 52%, rgba(248,252,254,0) 100%),
-o-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.4) 24%, rgba(248,252,254,0) 40%, rgba(248,252,254,0) 100%),
-o-radial-gradient(rgba(255,255,255,.9) 30px, rgba(255,255,255,.7) 80px, rgba(255,255,255,.4) 96px, rgba(255,255,255,0) 80%);
background-image: /* For Firefox 3.6 to 15 */
-moz-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 44%, rgba(248,252,254,0) 66%, rgba(248,252,254,0) 100%),
-moz-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.4) 34%, rgba(248,252,254,0) 58%, rgba(248,252,254,0) 100%),
-moz-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.2) 44%, rgba(248,252,254,0) 68%, rgba(248,252,254,0) 100%),
-moz-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 37%, rgba(248,252,254,0) 52%, rgba(248,252,254,0) 100%),
-moz-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.4) 24%, rgba(248,252,254,0) 40%, rgba(248,252,254,0) 100%),
-moz-radial-gradient( rgba(255,255,255,.9) 30px, rgba(255,255,255,.7) 80px, rgba(255,255,255,.4) 96px, rgba(255,255,255,0) 80%);
background-image: /* Standard syntax */
radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 44%, rgba(248,252,254,0) 66%, rgba(248,252,254,0) 100%),
radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.4) 34%, rgba(248,252,254,0) 58%, rgba(248,252,254,0) 100%),
radial-gradient(rgba(254,255,255,.7) 0%, rgba(248,252,254,.2) 44%, rgba(248,252,254,0) 68%, rgba(248,252,254,0) 100%),
radial-gradient(rgba(254,255,255,.7) 0%, rgba(248,252,254,.5) 37%, rgba(248,252,254,0) 52%, rgba(248,252,254,0) 100%),
radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.4) 24%, rgba(248,252,254,0) 40%, rgba(248,252,254,0) 100%),
linear-gradient(rgba(204,230,255,.9) 30px, rgba(255,255,255,.6) 80px, rgba(255,255,255,.3) 110px, rgba(255,255,230,0) 350px);
background-repeat:repeat-x;
background-size:
200px 113px, 153px 68px,
407px 101px, 353px 130px,
257px 139px,
300px 350px;
background-position:
top;
}
For funsies @keyframes can be used to make the clouds dirft along. Because each radial gradient is a different size the cloud formation slowly changes a little bit as it moves along. That effect could be exaggerated a bit by making the background sizes even more different (you can need to readjust the gradient to keep the clouds the same size) :
@keyframes animatedBackground {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
.cottonyClouds {
animation: animatedBackground 86s linear infinite;
}
PROBLEM TO SOLVE: At the end of the animation everything jerks back to starting positions. Need to rework the math so that is not noticeable
.cloudText {
animation: animatedBackground 86s linear infinite;
color: rgba(255,255,255,1);
background-image: /* Safari 5.1 to 6.0 */
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 44%, rgba(248,252,254,0) 66%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.4) 34%, rgba(248,252,254,0) 58%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.8) 0%, rgba(248,252,254,.2) 44%, rgba(248,252,254,0) 68%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.5) 37%, rgba(248,252,254,0) 52%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(254,255,255,.9) 0%, rgba(248,252,254,.4) 24%, rgba(248,252,254,0) 40%, rgba(248,252,254,0) 100%),
-webkit-radial-gradient(rgba(255,255,255,.9) 30px, rgba(255,255,255,.7) 80px, rgba(255,255,255,.4) 96px, rgba(255,255,255,0) 80%);
background-repeat:repeat-x;
background-size:
200px 113px, 153px 68px,
407px 101px, 353px 130px,
257px 139px,
300px 350px;
background-position: top;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}