123

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.

            
              @import "compass/css3";

/* Set Colours */
$bgColor: #fff;
$checkcolor1: #ccc;
$shadow: rgba(0,0,0,0.35);
/* /END Set Colours */
body{
background-color: $bgColor;
background-image: linear-gradient(45deg, $checkcolor1 25%, transparent 25%, transparent 75%, $checkcolor1 75%, $checkcolor1), 
linear-gradient(45deg, $checkcolor1 25%, transparent 25%, transparent 75%, $checkcolor1 75%, $checkcolor1);
background-size:60px 60px;
background-position:0 0, 30px 30px;
position:relative;
padding:100px 0 0 0;
}
.boxsetup {
    content:"";
    position:absolute;
    background:transparent;
    width:20px;
    height:20px;
}

/** START YODA ************************************/
#yoda {
    @extend .boxsetup;
    background:#2c442a; /* Origin box */
    position:relative;
    margin-left:40%;
}
/* SHADOW */
#yoda:before {
    @extend .boxsetup;
    width:30px;
    height:25px;
    box-shadow:
    -205px 50px 20px 0 $shadow,
    316px 50px 20px 0 $shadow,
    -205px 60px 20px 0 $shadow,
    316px 60px 20px 0 $shadow,
    -205px 70px 20px 0 $shadow,
    316px 70px 20px 0 $shadow,
    -205px 80px 20px 0 $shadow,
    316px 80px 20px 0 $shadow,
    -205px 90px 20px 0 $shadow,
    300px 90px 20px 0 $shadow,
    -190px 95px 20px 0 $shadow,
    290px 95px 20px 0 $shadow,
    -185px 100px 20px 0 $shadow,
    280px 100px 20px 0 $shadow,
    -180px 110px 20px 0 $shadow,
    285px 100px 20px 0 $shadow,
    -170px 120px 20px 0 $shadow,
    280px 120px 20px 0 $shadow,
    -160px 130px 20px 0 $shadow,
    270px 120px 20px 0 $shadow,
    -150px 140px 20px 0 $shadow,
    260px 140px 20px 0 $shadow,
    -140px 150px 20px 0 $shadow,
    250px 150px 20px 0 $shadow,
    -130px 160px 20px 0 $shadow,
    240px 160px 20px 0 $shadow,
    -120px 170px 20px 0 $shadow,
    225px 160px 20px 0 $shadow,
    -110px 180px 20px 0 $shadow,
    220px 165px 20px 0 $shadow,
    -100px 190px 20px 0 $shadow,
    -95px 200px 20px 0 $shadow,
    210px 165px 20px 0 $shadow,
    -90px 210px 20px 0 $shadow,
    200px 170px 20px 0 $shadow,
    200px 180px 20px 0 $shadow,
    200px 185px 20px 0 $shadow
    ;
}
/* YODA  */
#yoda:after {
    @extend .boxsetup;
    width:20px;
    height:20px;
    box-shadow:
    /*1*/
    20px 0 #2c442a,
    40px 0 #2c442a,
    60px 0 #2c442a,
    80px 0 #2c442a,
    100px 0 #2c442a,
    120px 0 #2c442a,
    /*2*/
    -180px 20px #223621,    
    -20px 20px #2c442a,   
    0px 20px #50814b,
    20px 20px #50814b, 
    40px 20px #67a960,   
    60px 20px #5c9756, 
    80px 20px #67a960,
    100px 20px #c1cbb1,
    120px 20px #68a960,    
    140px 20px #2b432a,
    300px 20px #233622,
    /*3*/
    -200px 40px #2b442a,    
    -180px 40px #40663c,
    -160px 40px #233621,    
    -40px 40px #2b442a,
    -20px 40px #50814b,
    -10px 40px #68a960,
    5px 40px #68a960,
    20px 40px #51824b,
    40px 40px #67a960,
    60px 40px #497643,
    80px 40px #5b9756, 
    100px 40px #67a95f,
    120px 40px #c2cbb2, 
    140px 40px #68a960,
    160px 40px #2b442a, 
    280px 40px #2c442b,
    300px 40px #3f663c,
    320px 40px #223621,
    /*4*/
    -200px 60px #2c442b,
    -180px 60px #5c9857,
    -160px 60px #3f653c,
    -140px 60px #223621,
    -60px 60px #2b442a,
    -40px 60px #3a5e37,
    -20px 60px #3a5e37,
    0px 60px #51824b,
    5px 60px #51824b,
    20px 60px #68a960,
    40px 60px #51824b,
    60px 60px #67a95f,
    80px 60px #497543,
    100px 60px #466f40,
    120px 60px #67a960,
    140px 60px #67a960,
    160px 60px #67a960,
    180px 60px #2b432a,
    240px 60px #223621,
    260px 60px #2c442b,
    280px 60px #5c9756,
    300px 60px #497644,
    320px 60px #223621,
    /*5*/
    -200px 80px #2f3118,
    -180px 80px #3b5e37,
    -160px 80px #2b442a,
    -140px 80px #3f653c,
    -120px 80px #233622,
    -100px 80px #233622,
    -80px 80px #32421c,
    -60px 80px #3a5e37,
    -40px 80px #3a5d37,
    -20px 80px #497644,
    0px 80px #456f3f,
    5px 80px #456f3f,
    20px 80px #52834d,
    40px 80px #456f40,
    60px 80px #51824c,
    80px 80px #51824c,
    100px 80px #456f40,
    120px 80px #68a960,
    140px 80px #5b9756,
    160px 80px #c2cbb2,
    180px 80px #3a5e37,
    200px 80px #2b442a,
    220px 80px #2b442a,
    240px 80px #3f653c,
    260px 80px #5b9756,
    280px 80px #324d2f,
    300px 80px #456f40,
    320px 80px #223621,
    /*6*/
    -180px 100px #2c442b,
    -160px 100px #324d2f,
    -140px 100px #324e2f,
    -120px 100px #2c442b,
    -100px 100px #5c9856,
    -80px 100px #50814b,
    -60px 100px #3a5d37,
    -40px 100px #51824c,
    -20px 100px #2e452c,
    0px 100px #2e452b,
    20px 100px #2e452b,
    40px 100px #52834d,
    60px 100px #497644,
    80px 100px #52834c,
    100px 100px #2d442b,
    120px 100px #2e452b,
    140px 100px #2d452b,
    160px 100px #51824c,
    180px 100px #51824c,
    200px 100px #3a5d37,
    220px 100px #497643,
    240px 100px #334e30,    
    260px 100px #334e30,    
    280px 100px #51824c,    
    300px 100px #233722,
    /*7*/
    -160px 120px #2b442a,
    -140px 120px #3f653c,
    -120px 120px #324d2f,
    -100px 120px #2b432a,
    -80px 120px #2b442a,
    -60px 120px #497644,
    -40px 120px #2e452c,
    -20px 120px #497344,
    0px 120px #5a8f56,
    20px 120px #497344,
    40px 120px #2e452b,
    60px 120px #355331,
    80px 120px #365331,
    100px 120px #497344,
    120px 120px #5a8e55,
    140px 120px #497343,
    160px 120px #2e452c,
    180px 120px #68a960,
    200px 120px #334e30,
    220px 120px #334e2f,
    240px 120px #334e2f,
    260px 120px #42693e,
    280px 120px #233622,
    /*8*/
    -140px 140px #233622,
    -120px 140px #3f653c,
    -100px 140px #2b432a,
    -80px 140px #2b432a,
    -60px 140px #497644,
    -40px 140px #4a7344,
    -20px 140px #c1cbb1,
    0px 140px #2f3018,
    20px 140px #c1cbb1,
    40px 140px #497343,
    60px 140px #6cb366,
    80px 140px #446c40,
    100px 140px #c1cbb1,
    120px 140px #2f3118,
    140px 140px #c1cbb1,
    160px 140px #497344,
    180px 140px #51824c,
    200px 140px #2c442a,
    220px 140px #2c442a,
    240px 140px #42693e,
    260px 140px #223621,
    /*9*/
    -120px 160px #223621,
    -100px 160px #3b5f39,
    -80px 160px #3f653c,
    -60px 160px #3f653c,
    -40px 160px #51824c,
    -20px 160px #51824c,
    0px 160px #51824c,
    20px 160px #446c3f,
    40px 160px #3a5d37,
    60px 160px #2c442b,
    80px 160px #3a5e37,
    100px 160px #497344,
    120px 160px #51824b,
    140px 160px #51824c,
    160px 160px #67a960,
    180px 160px #51824c,
    200px 160px #3b5e39,
    220px 160px #233622,
    240px 160px #233622,
    /*10*/
    -100px 180px #233622,
    -80px 180px #3b5e39,
    -60px 180px #3b5f39,
    -40px 180px #497644,
    -20px 180px #497644,
    0px 180px #3f653c,
    20px 180px #3f653c,
    40px 180px #52834d,
    60px 180px #41673e,
    80px 180px #52834d,
    100px 180px #3f663c,
    120px 180px #3f663c,
    140px 180px #497644,
    160px 180px #51824c,
    180px 180px #3b5e39, 
    200px 180px #233622,
    /*11*/
    -80px 200px #233722,
    -60px 200px #3b5f39,
    -40px 200px #3b5f39,
    -20px 200px #41673e,
    0px 200px #3f653b,
    20px 200px #5b9756,
    40px 200px #4a7943,
    60px 200px #5b9756,
    80px 200px #4a7943,
    100px 200px #5b9756,
    120px 200px #51824c,
    140px 200px #41673e,
    160px 200px #3c5f39,
    180px 200px #3b5e39,
    200px 200px #233622,
    /*12*/
    -80px 220px #343020,
    -60px 220px #233622,
    -40px 220px #2b442a,
    -20px 220px #3b5f39,
    0px 220px #42693e,
    20px 220px #2e3018,
    40px 220px #2f3118,
    60px 220px #2f3118,
    80px 220px #2f3118,
    100px 220px #2e3018,
    120px 220px #42693d,
    140px 220px #3b5e39,
    160px 220px #2d452b,
    180px 220px #223621,
    200px 220px #353121,
    /*13*/
    -100px 240px #353121,
    -80px 240px #433f29,
    -60px 240px #81774e,
    -40px 240px #81774e,
    -20px 240px #2d452b,
    0px 240px #42693e,
    20px 240px #51824c,
    40px 240px #51824c,
    60px 240px #51824c,
    80px 240px #51824c,
    100px 240px #51824c,
    120px 240px #436a3e,
    140px 240px #2d442b,
    160px 240px #8c8156,
    180px 240px #7f754d,
    200px 240px #635b3b,
    /*14*/
    -120px 260px #343020,
    -100px 260px #81774e,
    -80px 260px #a89d6f,
    -60px 260px #a89c6f,
    -40px 260px #80774e,
    -20px 260px #8c8155,
    0px 260px #2e452c,
    20px 260px #2e452b,
    40px 260px #2c442b,
    60px 260px #2c442b,
    80px 260px #2c442b,
    100px 260px #2c442b,
    120px 260px #2c442b,
    140px 260px #81774f,
    160px 260px #a79c6f,
    180px 260px #a89d70,
    200px 260px #c6bfa1,
    220px 260px #353120,
    /*15*/
    -140px 280px #353120,
    -120px 280px #81774e,
    -100px 280px #9b8f5e,
    -80px 280px #a89d70,
    -60px 280px #c7bfa1,
    -40px 280px #c7bfa1,
    -20px 280px #8b8155,
    0px 280px #2e1c17,
    20px 280px #16100d,
    40px 280px #3f653c,
    60px 280px #3f653c,
    80px 280px #3f653c,
    100px 280px #16100d,
    120px 280px #4f3d30,
    140px 280px #8c8155,
    160px 280px #a89d6f,
    180px 280px #8c8155,
    200px 280px #c6bfa1,
    220px 280px #c6bfa1,
    240px 280px #353120,
    /*16*/
    -160px 300px #343020,
    -140px 300px #80774e,
    -120px 300px #9b8f5e,
    -100px 300px #bdb592,
    -80px 300px #a89d6f,
    -60px 300px #645c3c,
    -40px 300px #bdb592,
    -20px 300px #635b3b,
    0px 300px #2e1b16,
    20px 300px #2e1b16,
    40px 300px #16100d,
    60px 300px #513f31,
    80px 300px #16100d,
    100px 300px #503d31,
    120px 300px #5f4939,
    140px 300px #8b8155,
    160px 300px #bdb592,
    180px 300px #635b3c,
    200px 300px #80774e,
    220px 300px #a89d70,
    240px 300px #c7bfa1,
    260px 300px #343020,
    /*17*/
    -180px 320px #343020,
    -160px 320px #81774e,
    -140px 320px #9b8f5e,
    -120px 320px #bcb591,
    -100px 320px #bcb592,
    -80px 320px #48422c,
    -60px 320px #a89c6f,
    -40px 320px #bdb592,
    -20px 320px #635b3c,
    0px 320px #8b8055,
    20px 320px #2e1b16,
    40px 320px #2e1b16,
    60px 320px #15100d,
    80px 320px #4f3d30,
    100px 320px #3b231e,
    120px 320px #8c8155,
    140px 320px #8c8155,
    160px 320px #bdb592,
    180px 320px #a89d70,
    200px 320px #48422c,
    220px 320px #81774e,
    240px 320px #a89d6f,
    260px 320px #c7bfa1,
    280px 320px #353120,
    /*18*/
    -180px 340px #423e29,
    -160px 340px #80774e,
    -140px 340px #bdb592,
    -120px 340px #9b8f5e,
    -100px 340px #bcb591,
    -80px 340px #48432c,
    -60px 340px #a89d70,
    -40px 340px #bdb592,
    -20px 340px #645c3c,
    0px 340px #bcb592,
    20px 340px #2e1b16,
    40px 340px #57332c,
    60px 340px #000000,
    80px 340px #57332c,
    100px 340px #3a231e,
    120px 340px #635b3c,
    140px 340px #8c8155,
    160px 340px #bcb591,
    180px 340px #a89d6f,
    200px 340px #48432c,
    220px 340px #635b3b,
    240px 340px #81774f,
    260px 340px #bcb591,
    280px 340px #353020,
    /*19*/
    -200px 360px #2e452c,
    -180px 360px #2e452b,
    -160px 360px #98ac57,
    -140px 360px #9c8f5e,
    -120px 360px #635b3b,
    -100px 360px #433e29,
    -80px 360px #48432c,
    -60px 360px #a89d6f,
    -40px 360px #bcb591,
    -20px 360px #635b3c,
    0px 360px #bdb592,
    20px 360px #2e1c17,
    40px 360px #57332c,
    60px 360px #080a1c,
    80px 360px #56332c,
    100px 360px #3b231e,
    120px 360px #635b3c,
    140px 360px #8b8155,
    160px 360px #bdb592,
    180px 360px #a89d6f,
    200px 360px #48422c,
    220px 360px #635b3b,
    240px 360px #81774e,
    260px 360px #bdb592,
    280px 360px #353121,
    /*20*/
    -200px 380px #2d452b,
    -180px 380px #68a960,
    -160px 380px #68a960,
    -140px 380px #2d442b,
    -120px 380px #433e29,
    -100px 380px #343020,
    -80px 380px #48432c,
    -60px 380px #a89c6f,
    -40px 380px #bcb591,
    -20px 380px #635b3b,
    0px 380px #bdb592,
    20px 380px #2e1c17,
    40px 380px #56322c,
    60px 380px #2e1b16,
    80px 380px #57332c,
    100px 380px #3a221d,
    120px 380px #645b3c,
    140px 380px #8c8155,
    160px 380px #bdb592,
    180px 380px #a89d6f,
    200px 380px #48432c,
    220px 380px #635b3b,
    240px 380px #81774f,
    260px 380px #bdb592,
    280px 380px #353020,
    /*21*/
    -200px 400px #2d452b,
    -180px 400px #497644,
    -160px 400px #497644,
    -140px 400px #2d452b,
    -120px 400px #3a221d,
    -100px 400px #353020,
    -80px 400px #48422c,
    -60px 400px #a89c6f,
    -40px 400px #bdb592,
    -20px 400px #8c8155,
    0px 400px #bcb591,
    20px 400px #2e1b16,
    40px 400px #57332c,
    60px 400px #2e1b16,
    80px 400px #57332d,
    100px 400px #3b231e,
    120px 400px #635b3c,
    140px 400px #8c8155,
    160px 400px #bcb591,
    180px 400px #a89d6f,
    200px 400px #48432c,
    220px 400px #635b3c,
    240px 400px #635b3c,
    260px 400px #635b3c,
    280px 400px #2d442b,
    /*22*/
    -180px 420px #2d442b,
    -160px 420px #2d442b,
    -140px 420px #3a231e,
    -120px 420px #453b35,
    -100px 420px #353121,
    -80px 420px #48422c,
    -60px 420px #a89d6f,
    -40px 420px #bdb592,
    -20px 420px #8c8155,
    0px 420px #bdb592,
    20px 420px #2e1b16,
    40px 420px #57332d,
    60px 420px #2e1b16,
    80px 420px #56322c,
    100px 420px #3a231e,
    120px 420px #635b3c,
    140px 420px #8c8155,
    160px 420px #bcb592,
    180px 420px #a89d6f,
    200px 420px #48432c,
    220px 420px #2d452b,
    240px 420px #497644,
    260px 420px #67a960,
    280px 420px #2e452b,
    /*23*/
    -160px 440px #3a231e,
    -140px 440px #453b34,
    -100px 440px #343020,
    -80px 440px #48432c,
    -60px 440px #a89d6f,
    -40px 440px #bcb591,
    -20px 440px #8b8155,
    0px 440px #bcb591,
    20px 440px #2e1b16,
    40px 440px #57332d,
    60px 440px #0a0807,
    80px 440px #57332c,
    100px 440px #3a221d,
    120px 440px #645b3c,
    140px 440px #8c8155,
    160px 440px #bcb591,
    180px 440px #a89d6f,
    200px 440px #47422c,
    220px 440px #2e452c,
    240px 440px #2e452c,
    260px 440px #2e452c,
    /*24*/
    -160px 460px #3a231e,
    -140px 460px #453b35,
    -100px 460px #353120,
    -80px 460px #48432c,
    -60px 460px #a89d6f,
    -40px 460px #bdb592,
    -20px 460px #645b3c,
    0px 460px #bcb591,
    20px 460px #2e1c17,
    40px 460px #57332c,
    60px 460px #3a2303,
    80px 460px #57332c,
    100px 460px #3a231e,
    120px 460px #635b3b,
    140px 460px #8c8155,
    160px 460px #bdb592,
    180px 460px #a89d6f,
    200px 460px #48432c,
    220px 460px #343020,
    /*25*/
    -160px 480px #3a221d,
    -140px 480px #453b35,
    -100px 480px #353120,
    -80px 480px #48422c,
    -60px 480px #a89d70,
    -40px 480px #bdb592,
    -20px 480px #635b3c,
    0px 480px #2e1c17,
    20px 480px #2e1c17,
    40px 480px #56322c,
    60px 480px #392202,
    80px 480px #57332c,
    100px 480px #3a221d,
    120px 480px #2e1b16,
    140px 480px #8c8156,
    160px 480px #bdb592,
    180px 480px #a89d6f,
    200px 480px #48432d,
    220px 480px #343020,
    /*26*/
    -160px 500px #3a231e,
    -140px 500px #453b35,
    -100px 500px #353121,
    -80px 500px #645c3c,
    -60px 500px #635b3c,
    -40px 500px #635b3b,
    -20px 500px #635b3b,
    0px 500px #2e1b16,
    20px 500px #3b231e,
    40px 500px #3a221d,
    60px 500px #392303,
    80px 500px #3a231e,
    100px 500px #3a221d,
    120px 500px #2e1b17,
    140px 500px #645c3c,
    160px 500px #645b3c,
    180px 500px #645b3c,
    200px 500px #635b3c,
    220px 500px #353121,
    /*27*/
    -160px 520px #3a221d,
    -140px 520px #453b35,
    -80px 520px #1f1c13,
    -60px 520px #6c6441,
    -40px 520px #6b6340,
    -20px 520px #8c8156,
    0px 520px #261702,
    20px 520px #2d1b03,
    40px 520px #3a231e,
    60px 520px #2c1b02,
    80px 520px #3b231e,
    100px 520px #3b231e,
    120px 520px #261702,
    140px 520px #3b2502,
    160px 520px #3b2502,
    180px 520px #583605,
    200px 520px #443e30,
    220px 520px #353120,
    /*28*/
    -160px 540px #3b231e,
    -140px 540px #453b35,
    -60px 540px #261601,
    -40px 540px #261702,
    -20px 540px #261702,
    0px 540px #261702,
    20px 540px #261702,
    40px 540px #261702,
    80px 540px #261702,
    100px 540px #261702,
    120px 540px #261702,
    140px 540px #261702,
    160px 540px #261702,
    180px 540px #261702,
    200px 540px #261702;    
}

            
          
!
            
              /*
To convert to SCSS:
Learn SCSS: http://sass-lang.com/guide

Tutorial: https://coderwall.com/p/0lb-qq
Example: https://codepen.io/kevingimbel/pen/iqDIv

References:
Checked BG:http://lea.verou.me/css3patterns/#checkerboard
Canvas box-shadow pixel art generator:
https://codepen.io/Angusfr/details/FxwEb
The Real Beauty of CSS3 Box Shadows:
http://codetheory.in/the-real-beauty-of-css3-box-shadows/
*/
            
          
!
999px
🕑 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.

Console