css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    <div id='canvas' class='canvas'>
        <div id='canvas-bg-winter' class='canvas-bg' ></div>
        <div id='canvas-bg-autum' class='canvas-bg' ></div>
        <div id='canvas-bg-summer' class='canvas-bg' ></div>

        <div class='canvas-content'>
            <div class='b5 c4'></div>
            <div class='b6 c1'></div>
            <div class='b7 c32'></div>
            <div class='b3 c2'></div>
            <div class='b4 c4'></div>
            <div class='b12 c3'></div>
            <div class='b11 c4'></div>
            <div class='b10 c7'></div>
            <div class='b13 c5'></div>
            <div class='b14 c1'></div>
            <div class='b2 c4'></div>
            <div class='b15 c2'></div>
            <div class='b16 c4'></div>
            <div class='b17 c7'></div>
            <div class='b8 c2'></div>
            <div class='b9 c3'></div>
            <div class='b18 c6'></div>
            <div class='b19 c5'></div>
            <div class='b20 c4'></div>
            <div class='b21 c2'></div>
            <div class='b1 c1'></div>
            <div class='b22 c4'></div>
            <div class='b23 c4'></div>
            <div class='b24 c7'></div>
            <div class='b25 ct4'></div>
            <div class='b26 ct3'></div>
            <div class='b28 ct4'></div>
            <div class='b29 ct2'></div>
            <div class='b30 ct3'></div>
            <div class='b27 ct4'></div>
            <div class='b31 ct4'></div>
            <div class='b33 ct1'></div>
            <div class='b32 ct2'></div>
            <div class='b34 ct2'></div>
            <div class='b35 ct4'></div>
            <div class='b36 ct4'></div>
            <div class='b37 ct4'></div>
            <div class='cloud cloud-1'></div>
            <div class='cloud cloud-2'></div>
    <div class='buttons'>
        <p class='bt' id='winter'>winter</p>
        <p class='bt' id='autum'>autum</p>
        <p class='bt' id='summer'>summer</p>

              /* http://www.colorzilla.com/gradient-editor/ */
  font-family: helvetica, arial;
html, body{
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;

  position: absolute;
  width: 100%;
  height: 100%;
  /*background-image: url('https://d13yacurqjgara.cloudfront.net/users/707385/screenshots/2437286/75.jpg');*/
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  transition: .55s all;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(192,236,235,0) 54%,rgba(163,227,226,0.54) 79%,rgba(163,227,226,1) 100%);
    background: radial-gradient(ellipse at center, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
    background: radial-gradient(ellipse at center, rgba(254,252,234,1) 0%,rgba(44,160,197,0.69) 100%);

    opacity: 1;
    position: absolute;
    width: 500px;
    height: 425px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
.canvas-content *{
  position: absolute;
  width: 0;
  height: 0;
  transition: 1.05s all;

.canvas-content div:nth-child(2){ transition-delay: 0.2s }
.canvas-content div:nth-child(3){ transition-delay: 0.3s }
.canvas-content div:nth-child(4){ transition-delay: 0.4s }
.canvas-content div:nth-child(5){ transition-delay: 0.5s }
.canvas-content div:nth-child(6){ transition-delay: 0.6s }
.canvas-content div:nth-child(7){ transition-delay: 0.7s }
.canvas-content div:nth-child(8){ transition-delay: 0.8s }
.canvas-content div:nth-child(9){ transition-delay: 0.9s }
.canvas-content div:nth-child(10){ transition-delay: 1.0s }
.canvas-content div:nth-child(11){ transition-delay: 1.1s }
.canvas-content div:nth-child(12){ transition-delay: 1.2s }
.canvas-content div:nth-child(13){ transition-delay: 1.3s }
.canvas-content div:nth-child(14){ transition-delay: 1.4s }
.canvas-content div:nth-child(15){ transition-delay: 1.5s }
.canvas-content div:nth-child(16){ transition-delay: 1.6s }
.canvas-content div:nth-child(17){ transition-delay: 1.7s }
.canvas-content div:nth-child(18){ transition-delay: 1.8s }
.canvas-content div:nth-child(19){ transition-delay: 1.9s }
.canvas-content div:nth-child(20){ transition-delay: 2.0s }
.canvas-content div:nth-child(21){ transition-delay: 2.1s }
.canvas-content div:nth-child(22){ transition-delay: 2.2s }
.canvas-content div:nth-child(23){ transition-delay: 2.3s }
.canvas-content div:nth-child(24){ transition-delay: 2.4s }
.canvas-content div:nth-child(25){ transition-delay: 2.5s }
.canvas-content div:nth-child(26){ transition-delay: 2.6s }
.canvas-content div:nth-child(27){ transition-delay: 2.7s }
.canvas-content div:nth-child(28){ transition-delay: 2.8s }
.canvas-content div:nth-child(29){ transition-delay: 2.9s }
.canvas-content div:nth-child(30){ transition-delay: 3.0s }
.canvas-content div:nth-child(31){ transition-delay: 3.1s }
.canvas-content div:nth-child(32){ transition-delay: 3.2s }
.canvas-content div:nth-child(33){ transition-delay: 3.3s }
.canvas-content div:nth-child(34){ transition-delay: 3.4s }
.canvas-content div:nth-child(35){ transition-delay: 3.5s }
.canvas-content div:nth-child(36){ transition-delay: 3.6s }
.canvas-content div:nth-child(37){ transition-delay: 3.7s }
    border-left: 129px solid black;
    border-bottom: 74px solid transparent !important;
    border-top: 82px solid transparent !important;
    left: 267px;
    top: 62px;
    transform: rotate(-58deg);
    border-top: 30px solid rebeccapurple;
    border-left: 63px solid transparent !important;
    border-right: 94px solid transparent !important;
    left: 211px;
    top: 192px;
    transform: rotate(32deg);
    border-top: 30px solid rebeccapurple;
    border-left: 33px solid transparent !important;
    border-right: 34px solid transparent !important;
    left: 209px;
    top: 184px;
    transform: rotate(-8deg);
    border-top: 30px solid red;
    border-left: 36px solid transparent !important;
    border-right: 34px solid transparent !important;
    left: 193px;
    top: 205px;
    transform: rotate(33deg);
    border-left: 36px solid red;
    border-top: 38px solid transparent !important;
    border-bottom: 34px solid transparent !important;
    left: 419px;
    top: 176px;
    transform: rotate(56deg)
    border-right: 11px solid green;
    border-top: 52px solid transparent !important;
    border-bottom: 34px solid transparent !important;
    left: 414px;
    top: 153px;
    transform: rotate(56deg);
    width: 0;
    height: 0;
    left: 374px;
    top: 80px;
    border-right: 20px solid orange;
    border-top: 137px solid transparent !important;
    border-bottom: 14px solid transparent !important;
    background: transparent;
    transform: rotate(-21deg);
    border-left: 118px solid blue;
    border-top: 30px solid transparent !important;
    border-bottom: 71px solid transparent !important;
    left: 372px;
    top: 210px;
    border-left: 35px solid green;
    border-top: 94px solid transparent !important;
    left: 364px;
    top: 102px;
    height: 61px;
    transform: rotate(1deg) skewY(51deg) skewX(-3deg);
    border-left: 24px solid red;
    border-bottom: 35px solid transparent !important;
    border-top: 22px solid transparent !important;
    left: 305px;
    top: 299px;
    transform: rotate(23deg);
    border-left: 37px solid purple;
    border-bottom: 38px solid transparent !important;
    border-top: 43px solid transparent !important;
    left: 271px;
    top: 291px;
    transform: rotate(63deg);
    border-bottom: 46px solid red;
    border-right: 60px solid transparent !important;
    border-left: 30px solid transparent !important;
    left: 234px;
    top: 272px;
    transform: rotate(-23deg);
    border-top: 75px solid orange;
    border-left: 81px solid transparent !important;
    border-right: 72px solid transparent !important;
    left: 169px;
    top: 240px;
    border-top: 85px solid green;
    border-left: 81px solid transparent !important;
    border-right: 72px solid transparent !important;
    left: 177px;
    top: 196px;
    transform: rotate(-30deg);
    border-top: 79px solid blue;
    border-left: 1px solid transparent !important;
    border-right: 97px solid transparent !important;
    left: 254px;
    top: 221px;
    transform: rotate(15deg) skewX(-4deg) skewY(0deg);
    border-right: 128px solid red;
    border-top: 53px solid transparent !important;
    border-bottom: 10px solid transparent !important;
    left: 245px;
    top: 232px;
    border-left: 35px solid lightseagreen;
    border-top: 0px solid transparent !important;
    border-bottom: 19px solid transparent !important;
    top: 296px;
    left: 347px;
    height: 20px;
    transform: skewX(4deg) skewY(-21deg) rotate(-23deg);
    border-top: 36px solid blue;
    border-left: 88px solid transparent !important;
    border-right: 32px solid transparent !important;
    top: 289px;
    left: 243px;
    transform: rotate(4deg);
    border-bottom: 35px solid blue;
    border-right: 47px solid transparent !important;
    border-left: 8px solid transparent !important;
    top: 315px;
    left: 361px;
    transform: rotate(13deg);
    border-right: 27px solid red;
    border-top: 80px solid transparent !important;
    border-bottom: 0px solid transparent !important;
    top: 294px;
    left: 379px;
    transform: rotate(-70deg) skewY(49deg);
    border-top: 52px solid blue;
    border-right: 22px solid transparent !important;
    border-left: 67px solid transparent !important;
    top: 297px;
    left: 378px;
    transform: rotate(-18deg);
    border-top: 21px solid red;
    border-right: 55px solid transparent !important;
    border-left: 90px solid transparent !important;
    top: 274px;
    left: 364px;
    transform: rotate(-31deg);
    border-left: 20px solid red;
    border-top: 27px solid transparent !important;
    top: 246px;
    left: 372px;
    border-right: 8px solid red;
    border-top: 20px solid transparent !important;
    top: 273px;
    left: 364px;
    border-right: 8px solid red;
    border-top: 40px solid transparent !important;
    top: 319px;
    left: 318px;
    transform: rotate(-51deg);
     border-left: 4px solid blue;
    border-top: 40px solid transparent !important;
    top: 310px;
    left: 318px;
    transform: rotate(-51deg);
    border-right: 6px solid green;
    border-top: 7px solid transparent;
    border-bottom: 97px solid transparent;
    top: 308px;
    left: 331px;
    transform: rotate(5deg);
    border-right: 19px solid blue;
    border-top: 32px solid transparent !important;
    top: 391px;
    left: 315px;
    border-left: 10px solid red;
    border-top: 50px solid transparent !important;
    border-bottom: 49px solid transparent !important;
    top: 307px;
    left: 337px;
    transform: rotate(5deg);
    height: 32px;
    top: 307px;
    left: 346px;
    border-right: 9px solid blue;
    border-bottom: 71px solid transparent;
    border-top: 5px solid transparent;
    transform: rotate(-11deg);
    border-left: 10px solid green;
    border-top: 8px solid transparent !important;
    border-bottom: 61px solid transparent !important;
    top: 357px;
    left: 336px;
    transform: rotate(17deg);
    border-right: 27px solid red;
    border-top: 53px solid transparent !important;
    top: 370px;
    left: 325px;
    transform: skewX(3deg);
    border-left: 17px solid green;
    border-top: 50px solid transparent !important;
    top: 370px;
    left: 351px;
    border-bottom: 3px solid transparent !important;
    border-top: 9px solid yellow;
    border-left: 2px solid transparent !important;
    border-right: 52px solid transparent !important;
    top: 344px;
    left: 343px;
    transform: rotate(-31deg);
    border-bottom: 7px solid cyan;
    border-right: 52px solid transparent !important;
    top: 344px;
    left: 345px;
    transform: rotate(-49deg) skewX(17deg);
    border-bottom: 4px solid red;
    border-left: 73px solid transparent !important;
    top: 419px;
    left: 244px;
    border-bottom: 5px solid red;
    border-right: 73px solid transparent !important;
    top: 418px;
    left: 349px;
    border-left: 19px solid transparent !important;

  border-color: #e0e8eb;
  border-color: #c5ced5;
  border-color: #b9c2c7;
  border-color: #d5dae0;
  border-color: #80878d; 
  border-color: #97a0a7;
  border-color: #6d7276;
  border-color: #666b6f;

  border-color: #926651;
  border-color: #6a3821;
  border-color: #794e3a;
  border-color: #542a23;

.autum .c1{
  border-color: #e1cf35;
.autum .c2{
  border-color: #aaa91d;
.autum .c3{
  border-color: #a29208;
.autum .c32{
  border-color: #e2db9d;
.autum .c4{
  border-color: #8c854a; 
.autum .c5{
  border-color: #736e3e;
.autum .c6{
  border-color: #58552f;
.autum .c7{
  border-color: #484627;

.summer .c1{
  border-color: #bcd83e;
.summer .c2{
  border-color: #7eb128;
.summer .c3{
  border-color: #adca28;
.summer .c32{
  border-color: #b9d634;
.summer .c4{
  border-color: #879a2c; 
.summer .c5{
  border-color: #677523;
.summer .c6{
  border-color: #6b6735;
.summer .c7{
  border-color: #615e34;

.winter .ct1{
  border-color: #959698;
.winter .ct2{
  border-color: #696a6c;
.winter .ct3{
  border-color: #727375;
.winter .ct4{
  border-color: #585c5f;

  position: fixed;
  bottom: 0;
  width: 100px;
  height: 200px;
  bottom: 0;
    text-align: left;
    position: relative;
    cursor: pointer;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
    transition: 0.45s;
    padding-left: 20px;

  position: absolute;
  background: no-repeat scroll center center transparent;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
.cloud-1 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4My44MzRweCIgaGVpZ2h0PSI1MnB4IiB2aWV3Qm94PSIwIDAgODMuODM0IDUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4My44MzQgNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNCREI4QUMiIHBvaW50cz0iMTAuNSw0Ny44MzQgMzEuMzMzLDI4LjUgMjUuNjY2LDUwLjMzNCAiLz48cG9seWdvbiBmaWxsPSIjOTc5NzhGIiBwb2ludHM9IjYzLjE2Niw1MiAzMS4zMzMsMjguNSAyNS42NjYsNTAuMzM0IDQxLjU2OSw1MS4wNCAiLz48cG9seWdvbiBmaWxsPSIjQTlBMTk1IiBwb2ludHM9IjAsNDUuODM0IDEwLjUsNDcuODM0IDMxLjMzMywyOC41ICIvPjxwb2x5Z29uIGZpbGw9IiNGREZBRTMiIHBvaW50cz0iNi4xNjYsMTggMzEuMzMzLDI4LjUgMCw0NS44MzQgIi8+PHBvbHlnb24gZmlsbD0iI0ZGRkVGNSIgcG9pbnRzPSI2NC42NjgsMTAuNSA0My4xNjgsMCA2LjE2NiwxOCAzMS4zMzMsMjguNSAiLz48cG9seWdvbiBmaWxsPSIjRTJENUM0IiBwb2ludHM9IjgzLjgzNCw0OC44MzQgNjMuMTY2LDUyIDMxLjMzMywyOC41IDY0LjY2OCwxMC41ICIvPjxwb2x5Z29uIGZpbGw9IiNGMkU3RDIiIHBvaW50cz0iNzEuNjY4LDE0LjI1IDgzLjgzNCw0OC44MzQgNjQuNjY4LDEwLjUgIi8+PHBvbHlsaW5lIGZpbGw9IiM4QTg1N0YiIHBvaW50cz0iNDAuMzI4LDUwLjk4NSAzMS4yMzQsMjguODgyIDYzLjE2Niw1MiAiLz48L3N2Zz4=);
    width: 100px;
    height: 72px;
    top: 30px;
    left: -10px;
    animation-name: loopCloudFirst;
    animation-duration: 8s;
.cloud-2 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4Ni41cHgiIGhlaWdodD0iNTIuODMzcHgiIHZpZXdCb3g9IjAgMCA4Ni41IDUyLjgzMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODYuNSA1Mi44MzMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNGRkY0RTEiIHBvaW50cz0iNCwxNi42NjcgMjAuMTY3LDMxLjUgMzMuODMzLDIuMzMzICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iODYuNSwzMS41IDYwLjgzNCw0LjE2NyA0NSwwIDMzLjgzMywyLjMzMyA2My42NjYsMTYuOTE3ICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZERUEiIHBvaW50cz0iNDIuNjY3LDI0LjMzMyA2My42NjYsMTYuOTE3IDMzLjgzMywyLjMzMyAyMC4xNjcsMzEuNSAiLz48cG9seWdvbiBmaWxsPSIjRjVFNUQxIiBwb2ludHM9IjU2LDUyLjgzMyA2My42NjYsMTYuOTE3IDIwLjE2NywzMS41ICIvPjxwb2x5Z29uIGZpbGw9IiM5ODk0OTAiIHBvaW50cz0iMCw1MiAyMC4xNjcsMzEuNSA1Niw1Mi44MzMgIi8+PHBvbHlnb24gZmlsbD0iIzdDN0E3RiIgcG9pbnRzPSI1LjgzMyw0Mi4xNjcgNCwxNi42NjcgMjAuMTY3LDMxLjUgNi4yODQsNDUuNjEyICIvPjxwb2x5Z29uIGZpbGw9IiNGQ0YxREMiIHBvaW50cz0iODYuNSwzNy44MzMgODYuNSwzMS41IDYzLjY2NiwxNi45MTcgNTYsNTIuODMzICIvPjxwb2x5Z29uIGZpbGw9IiNFOUREQ0QiIHBvaW50cz0iNzgsNTAuNjY3IDg2LjUsMzcuODMzIDU2LDUyLjgzMyAiLz48L3N2Zz4=);
    width: 100px;
    height: 60px;
    top: 40px;
    left: 300px;
    animation-name: loopCloudLast;
    animation-duration: 35s; 


@keyframes loopCloudFirst {
    0% {left: -10px;}
    50% {left: 50px;}
    100% {left: -10px;}
@keyframes loopCloudLast {
    0% {left: 300px;}
    50% {left: 550px;}
    100% {left: 300px;}

              function removeSeasons(){
  $('#canvas').removeClass( 'winter' );
  $('#canvas').removeClass( 'autum' );
  $('#canvas').removeClass( 'summer' );
  $('.canvas-bg').removeClass( 'active' );
  $('#winter, #autum, #summer').removeClass( 'active' );

function addSeason(season){
  $( '#canvas' ).addClass( season );
  $( '#canvas-bg-' + season ).addClass( 'active' );
  $( '#' + season ).addClass( 'active' )
  $( '.cloud' ).addClass( 'active' );

$('.bt').on('click', function(){
  addSeason( $(this).attr( 'id' ) );
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................