Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="steve"></div>
              
            
!

CSS

              
                body,html{background:#9BA2A5}
.steve{position:absolute;left:50%;margin-left:-54px;top:80px;
  width:4px;height:4px;
  box-shadow:52px 4px rgb(86, 77, 64),56px 4px rgb(122, 112, 99),60px 4px rgb(122, 112, 99),64px 4px rgb(86, 77, 64),68px 4px rgb(122, 112, 99),48px 8px rgb(86, 77, 64),52px 8px rgb(86, 77, 64),56px 8px rgb(176, 139, 90),60px 8px rgb(217, 183, 138),64px 8px rgb(217, 183, 138),68px 8px rgb(217, 183, 138),48px 12px rgb(86, 77, 64),52px 12px rgb(86, 77, 64),56px 12px rgb(176, 139, 90),60px 12px rgb(217, 183, 138),64px 12px rgb(217, 183, 138),68px 12px rgb(217, 183, 138),48px 16px rgb(86, 77, 64),52px 16px rgb(176, 139, 90),56px 16px rgb(176, 139, 90),60px 16px rgb(217, 183, 138),64px 16px rgb(217, 183, 138),68px 16px rgb(217, 183, 138),48px 20px rgb(86, 77, 64),52px 20px rgb(176, 139, 90),56px 20px rgb(13, 13, 13),60px 20px rgb(217, 183, 138),64px 20px rgb(217, 183, 138),68px 20px rgb(217, 183, 138),72px 20px rgb(13, 13, 13),48px 24px rgb(86, 77, 64),52px 24px rgb(13, 13, 13),56px 24px rgb(176, 139, 90),60px 24px rgb(13, 13, 13),64px 24px rgb(217, 183, 138),68px 24px rgb(13, 13, 13),76px 24px rgb(13, 13, 13),44px 28px rgb(176, 139, 90),48px 28px rgb(122, 112, 99),52px 28px rgb(176, 139, 90),56px 28px rgb(13, 13, 13),60px 28px rgb(217, 183, 138),64px 28px rgb(217, 183, 138),68px 28px rgb(217, 183, 138),72px 28px rgb(13, 13, 13),44px 32px rgb(176, 139, 90),48px 32px rgb(176, 139, 90),52px 32px rgb(86, 77, 64),56px 32px rgb(217, 183, 138),60px 32px rgb(217, 183, 138),64px 32px rgb(176, 139, 90),68px 32px rgb(217, 183, 138),48px 36px rgb(176, 139, 90),52px 36px rgb(86, 77, 64),56px 36px rgb(217, 183, 138),60px 36px rgb(122, 112, 99),64px 36px rgb(122, 112, 99),68px 36px rgb(122, 112, 99),48px 40px rgb(176, 139, 90),52px 40px rgb(86, 77, 64),56px 40px rgb(86, 77, 64),60px 40px rgb(217, 183, 138),64px 40px rgb(217, 183, 138),68px 40px rgb(217, 183, 138),48px 44px rgb(176, 139, 90),52px 44px rgb(86, 77, 64),56px 44px rgb(86, 77, 64),60px 44px rgb(122, 112, 99),64px 44px rgb(122, 112, 99),68px 44px rgb(122, 112, 99),48px 48px rgb(13, 13, 13),52px 48px rgb(13, 13, 13),56px 48px rgb(13, 13, 13),48px 52px rgb(13, 13, 13),52px 52px rgb(39, 39, 38),56px 52px rgb(39, 39, 38),32px 56px rgb(13, 13, 13),36px 56px rgb(13, 13, 13),40px 56px rgb(13, 13, 13),44px 56px rgb(13, 13, 13),48px 56px rgb(39, 39, 38),52px 56px rgb(39, 39, 38),56px 56px rgb(39, 39, 38),60px 56px rgb(39, 39, 38),64px 56px rgb(39, 39, 38),68px 56px rgb(39, 39, 38),32px 60px rgb(13, 13, 13),36px 60px rgb(39, 39, 38),40px 60px rgb(39, 39, 38),44px 60px rgb(39, 39, 38),48px 60px rgb(39, 39, 38),52px 60px rgb(39, 39, 38),56px 60px rgb(39, 39, 38),60px 60px rgb(39, 39, 38),64px 60px rgb(39, 39, 38),68px 60px rgb(39, 39, 38),32px 64px rgb(13, 13, 13),36px 64px rgb(39, 39, 38),40px 64px rgb(39, 39, 38),44px 64px rgb(39, 39, 38),48px 64px rgb(39, 39, 38),52px 64px rgb(39, 39, 38),56px 64px rgb(39, 39, 38),60px 64px rgb(39, 39, 38),64px 64px rgb(39, 39, 38),68px 64px rgb(39, 39, 38),28px 68px rgb(13, 13, 13),32px 68px rgb(39, 39, 38),36px 68px rgb(39, 39, 38),40px 68px rgb(39, 39, 38),44px 68px rgb(39, 39, 38),48px 68px rgb(39, 39, 38),52px 68px rgb(39, 39, 38),56px 68px rgb(39, 39, 38),60px 68px rgb(39, 39, 38),64px 68px rgb(39, 39, 38),68px 68px rgb(39, 39, 38),28px 72px rgb(13, 13, 13),32px 72px rgb(39, 39, 38),36px 72px rgb(39, 39, 38),40px 72px rgb(39, 39, 38),44px 72px rgb(39, 39, 38),48px 72px rgb(39, 39, 38),52px 72px rgb(39, 39, 38),56px 72px rgb(39, 39, 38),60px 72px rgb(39, 39, 38),64px 72px rgb(39, 39, 38),68px 72px rgb(39, 39, 38),28px 76px rgb(13, 13, 13),32px 76px rgb(39, 39, 38),36px 76px rgb(13, 13, 13),40px 76px rgb(39, 39, 38),44px 76px rgb(39, 39, 38),48px 76px rgb(39, 39, 38),52px 76px rgb(39, 39, 38),56px 76px rgb(39, 39, 38),60px 76px rgb(39, 39, 38),64px 76px rgb(39, 39, 38),68px 76px rgb(39, 39, 38),24px 80px rgb(13, 13, 13),28px 80px rgb(39, 39, 38),32px 80px rgb(39, 39, 38),40px 80px rgb(13, 13, 13),44px 80px rgb(39, 39, 38),48px 80px rgb(39, 39, 38),52px 80px rgb(39, 39, 38),56px 80px rgb(39, 39, 38),60px 80px rgb(39, 39, 38),64px 80px rgb(39, 39, 38),68px 80px rgb(39, 39, 38),24px 84px rgb(13, 13, 13),28px 84px rgb(39, 39, 38),32px 84px rgb(39, 39, 38),40px 84px rgb(13, 13, 13),44px 84px rgb(39, 39, 38),48px 84px rgb(39, 39, 38),52px 84px rgb(39, 39, 38),56px 84px rgb(39, 39, 38),60px 84px rgb(39, 39, 38),64px 84px rgb(39, 39, 38),68px 84px rgb(39, 39, 38),24px 88px rgb(13, 13, 13),28px 88px rgb(39, 39, 38),32px 88px rgb(39, 39, 38),40px 88px rgb(13, 13, 13),44px 88px rgb(39, 39, 38),48px 88px rgb(39, 39, 38),52px 88px rgb(39, 39, 38),56px 88px rgb(39, 39, 38),60px 88px rgb(39, 39, 38),64px 88px rgb(39, 39, 38),68px 88px rgb(39, 39, 38),24px 92px rgb(13, 13, 13),28px 92px rgb(39, 39, 38),40px 92px rgb(13, 13, 13),44px 92px rgb(13, 13, 13),48px 92px rgb(39, 39, 38),52px 92px rgb(39, 39, 38),56px 92px rgb(39, 39, 38),60px 92px rgb(39, 39, 38),64px 92px rgb(39, 39, 38),68px 92px rgb(39, 39, 38),72px 92px rgb(13, 13, 13),24px 96px rgb(13, 13, 13),28px 96px rgb(13, 13, 13),40px 96px rgb(13, 13, 13),44px 96px rgb(13, 13, 13),48px 96px rgb(39, 39, 38),52px 96px rgb(39, 39, 38),56px 96px rgb(39, 39, 38),60px 96px rgb(39, 39, 38),64px 96px rgb(39, 39, 38),68px 96px rgb(39, 39, 38),72px 96px rgb(13, 13, 13),20px 100px rgb(13, 13, 13),24px 100px rgb(39, 39, 38),28px 100px rgb(39, 39, 38),40px 100px rgb(13, 13, 13),44px 100px rgb(13, 13, 13),48px 100px rgb(39, 39, 38),52px 100px rgb(39, 39, 38),56px 100px rgb(39, 39, 38),60px 100px rgb(39, 39, 38),64px 100px rgb(39, 39, 38),68px 100px rgb(39, 39, 38),72px 100px rgb(13, 13, 13),76px 100px rgb(39, 39, 38),24px 104px rgb(13, 13, 13),28px 104px rgb(13, 13, 13),40px 104px rgb(13, 13, 13),44px 104px rgb(13, 13, 13),48px 104px rgb(13, 13, 13),52px 104px rgb(39, 39, 38),56px 104px rgb(39, 39, 38),60px 104px rgb(39, 39, 38),64px 104px rgb(39, 39, 38),68px 104px rgb(39, 39, 38),72px 104px rgb(13, 13, 13),20px 108px rgb(13, 13, 13),24px 108px rgb(39, 39, 38),28px 108px rgb(39, 39, 38),40px 108px rgb(13, 13, 13),44px 108px rgb(39, 39, 38),48px 108px rgb(39, 39, 38),52px 108px rgb(13, 13, 13),56px 108px rgb(13, 13, 13),60px 108px rgb(39, 39, 38),64px 108px rgb(39, 39, 38),68px 108px rgb(39, 39, 38),72px 108px rgb(13, 13, 13),76px 108px rgb(39, 39, 38),20px 112px rgb(13, 13, 13),24px 112px rgb(13, 13, 13),28px 112px rgb(13, 13, 13),40px 112px rgb(13, 13, 13),44px 112px rgb(13, 13, 13),48px 112px rgb(39, 39, 38),52px 112px rgb(39, 39, 38),56px 112px rgb(39, 39, 38),60px 112px rgb(39, 39, 38),64px 112px rgb(39, 39, 38),68px 112px rgb(39, 39, 38),72px 112px rgb(13, 13, 13),76px 112px rgb(39, 39, 38),24px 116px rgb(176, 139, 90),28px 116px rgb(176, 139, 90),40px 116px rgb(41, 64, 80),44px 116px rgb(41, 64, 80),48px 116px rgb(13, 13, 13),52px 116px rgb(13, 13, 13),56px 116px rgb(13, 13, 13),60px 116px rgb(13, 13, 13),64px 116px rgb(13, 13, 13),68px 116px rgb(41, 64, 80),24px 120px rgb(176, 139, 90),28px 120px rgb(217, 183, 138),40px 120px rgb(41, 64, 80),44px 120px rgb(41, 64, 80),48px 120px rgb(41, 64, 80),52px 120px rgb(41, 64, 80),56px 120px rgb(41, 64, 80),60px 120px rgb(41, 64, 80),64px 120px rgb(59, 94, 120),68px 120px rgb(59, 94, 120),72px 120px rgb(217, 183, 138),24px 124px rgb(176, 139, 90),28px 124px rgb(217, 183, 138),40px 124px rgb(41, 64, 80),44px 124px rgb(41, 64, 80),48px 124px rgb(59, 94, 120),52px 124px rgb(59, 94, 120),56px 124px rgb(59, 94, 120),60px 124px rgb(59, 94, 120),64px 124px rgb(59, 94, 120),68px 124px rgb(59, 94, 120),72px 124px rgb(217, 183, 138),24px 128px rgb(176, 139, 90),28px 128px rgb(217, 183, 138),40px 128px rgb(41, 64, 80),44px 128px rgb(41, 64, 80),48px 128px rgb(59, 94, 120),52px 128px rgb(59, 94, 120),56px 128px rgb(59, 94, 120),60px 128px rgb(59, 94, 120),64px 128px rgb(59, 94, 120),68px 128px rgb(59, 94, 120),72px 128px rgb(217, 183, 138),28px 132px rgb(217, 183, 138),40px 132px rgb(41, 64, 80),44px 132px rgb(41, 64, 80),48px 132px rgb(59, 94, 120),52px 132px rgb(59, 94, 120),56px 132px rgb(59, 94, 120),60px 132px rgb(59, 94, 120),64px 132px rgb(59, 94, 120),68px 132px rgb(59, 94, 120),72px 132px rgb(217, 183, 138),28px 136px rgb(217, 183, 138),40px 136px rgb(41, 64, 80),44px 136px rgb(41, 64, 80),48px 136px rgb(59, 94, 120),52px 136px rgb(59, 94, 120),56px 136px rgb(59, 94, 120),60px 136px rgb(59, 94, 120),64px 136px rgb(59, 94, 120),68px 136px rgb(59, 94, 120),72px 136px rgb(217, 183, 138),28px 140px rgb(217, 183, 138),40px 140px rgb(41, 64, 80),44px 140px rgb(41, 64, 80),48px 140px rgb(59, 94, 120),52px 140px rgb(59, 94, 120),56px 140px rgb(59, 94, 120),60px 140px rgb(59, 94, 120),64px 140px rgb(59, 94, 120),68px 140px rgb(59, 94, 120),72px 140px rgb(217, 183, 138),28px 144px rgb(217, 183, 138),40px 144px rgb(41, 64, 80),44px 144px rgb(41, 64, 80),48px 144px rgb(59, 94, 120),60px 144px rgb(41, 64, 80),64px 144px rgb(41, 64, 80),68px 144px rgb(59, 94, 120),72px 144px rgb(217, 183, 138),28px 148px rgb(217, 183, 138),40px 148px rgb(41, 64, 80),44px 148px rgb(41, 64, 80),48px 148px rgb(59, 94, 120),60px 148px rgb(41, 64, 80),64px 148px rgb(41, 64, 80),68px 148px rgb(59, 94, 120),72px 148px rgb(217, 183, 138),28px 152px rgb(217, 183, 138),32px 152px rgb(217, 183, 138),36px 152px rgb(217, 183, 138),40px 152px rgb(41, 64, 80),44px 152px rgb(41, 64, 80),48px 152px rgb(59, 94, 120),60px 152px rgb(41, 64, 80),64px 152px rgb(41, 64, 80),68px 152px rgb(59, 94, 120),72px 152px rgb(217, 183, 138),28px 156px rgb(217, 183, 138),32px 156px rgb(217, 183, 138),40px 156px rgb(217, 183, 138),44px 156px rgb(41, 64, 80),48px 156px rgb(59, 94, 120),60px 156px rgb(41, 64, 80),64px 156px rgb(41, 64, 80),68px 156px rgb(59, 94, 120),72px 156px rgb(217, 183, 138),28px 160px rgb(176, 139, 90),32px 160px rgb(217, 183, 138),40px 160px rgb(41, 64, 80),44px 160px rgb(41, 64, 80),48px 160px rgb(59, 94, 120),60px 160px rgb(41, 64, 80),64px 160px rgb(41, 64, 80),68px 160px rgb(59, 94, 120),72px 160px rgb(217, 183, 138),32px 164px rgb(176, 139, 90),40px 164px rgb(41, 64, 80),44px 164px rgb(41, 64, 80),48px 164px rgb(59, 94, 120),60px 164px rgb(41, 64, 80),64px 164px rgb(41, 64, 80),68px 164px rgb(59, 94, 120),36px 168px rgb(217, 183, 138),40px 168px rgb(41, 64, 80),44px 168px rgb(41, 64, 80),48px 168px rgb(59, 94, 120),60px 168px rgb(41, 64, 80),64px 168px rgb(41, 64, 80),68px 168px rgb(59, 94, 120),40px 172px rgb(41, 64, 80),44px 172px rgb(41, 64, 80),48px 172px rgb(59, 94, 120),60px 172px rgb(41, 64, 80),64px 172px rgb(41, 64, 80),68px 172px rgb(59, 94, 120),40px 176px rgb(41, 64, 80),44px 176px rgb(41, 64, 80),48px 176px rgb(59, 94, 120),60px 176px rgb(41, 64, 80),64px 176px rgb(41, 64, 80),68px 176px rgb(59, 94, 120),40px 180px rgb(41, 64, 80),44px 180px rgb(41, 64, 80),48px 180px rgb(59, 94, 120),60px 180px rgb(41, 64, 80),64px 180px rgb(59, 94, 120),68px 180px rgb(59, 94, 120),40px 184px rgb(41, 64, 80),44px 184px rgb(59, 94, 120),48px 184px rgb(59, 94, 120),60px 184px rgb(41, 64, 80),64px 184px rgb(59, 94, 120),68px 184px rgb(59, 94, 120),40px 188px rgb(41, 64, 80),44px 188px rgb(41, 64, 80),60px 188px rgb(41, 64, 80),64px 188px rgb(41, 64, 80),40px 192px rgb(41, 64, 80),44px 192px rgb(41, 64, 80),60px 192px rgb(41, 64, 80),64px 192px rgb(41, 64, 80),40px 196px rgb(41, 64, 80),44px 196px rgb(59, 94, 120),60px 196px rgb(41, 64, 80),64px 196px rgb(59, 94, 120),40px 200px rgb(41, 64, 80),44px 200px rgb(59, 94, 120),60px 200px rgb(41, 64, 80),64px 200px rgb(59, 94, 120),40px 204px rgb(41, 64, 80),44px 204px rgb(59, 94, 120),60px 204px rgb(41, 64, 80),64px 204px rgb(59, 94, 120),40px 208px rgb(41, 64, 80),44px 208px rgb(59, 94, 120),60px 208px rgb(41, 64, 80),64px 208px rgb(59, 94, 120),40px 212px rgb(41, 64, 80),44px 212px rgb(59, 94, 120),60px 212px rgb(41, 64, 80),64px 212px rgb(59, 94, 120),40px 216px rgb(41, 64, 80),44px 216px rgb(59, 94, 120),60px 216px rgb(41, 64, 80),64px 216px rgb(59, 94, 120),40px 220px rgb(41, 64, 80),44px 220px rgb(59, 94, 120),60px 220px rgb(41, 64, 80),64px 220px rgb(59, 94, 120),40px 224px rgb(41, 64, 80),44px 224px rgb(59, 94, 120),60px 224px rgb(41, 64, 80),64px 224px rgb(59, 94, 120),40px 228px rgb(41, 64, 80),44px 228px rgb(59, 94, 120),60px 228px rgb(41, 64, 80),64px 228px rgb(59, 94, 120),32px 232px rgb(104, 116, 123),36px 232px rgb(104, 116, 123),40px 232px rgb(39, 39, 38),44px 232px rgb(39, 39, 38),48px 232px rgb(104, 116, 123),52px 232px rgb(104, 116, 123),56px 232px rgb(104, 116, 123),60px 232px rgb(39, 39, 38),64px 232px rgb(39, 39, 38),68px 232px rgb(39, 39, 38),72px 232px rgb(104, 116, 123),76px 232px rgb(104, 116, 123),24px 236px rgb(104, 116, 123),28px 236px rgb(104, 116, 123),32px 236px rgb(104, 116, 123),36px 236px rgb(104, 116, 123),40px 236px rgb(13, 13, 13),44px 236px rgb(13, 13, 13),48px 236px rgb(13, 13, 13),52px 236px rgb(104, 116, 123),56px 236px rgb(104, 116, 123),60px 236px rgb(13, 13, 13),64px 236px rgb(13, 13, 13),68px 236px rgb(13, 13, 13),72px 236px rgb(13, 13, 13),76px 236px rgb(104, 116, 123),80px 236px rgb(104, 116, 123),84px 236px rgb(104, 116, 123),32px 240px rgb(104, 116, 123),36px 240px rgb(104, 116, 123),40px 240px rgb(104, 116, 123),44px 240px rgb(104, 116, 123),48px 240px rgb(104, 116, 123),52px 240px rgb(104, 116, 123),56px 240px rgb(104, 116, 123),60px 240px rgb(104, 116, 123),64px 240px rgb(104, 116, 123),68px 240px rgb(104, 116, 123),72px 240px rgb(104, 116, 123),76px 240px rgb(104, 116, 123);
}
              
            
!

JS

              
                /*
Based on Michael B. Myers Jr. dribbble http://dribbble.com/shots/288104-Steve-Jobs
*/
              
            
!
999px

Console