cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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{
  background:#333;
}
div{
  width:10px;
  height:10px;
  background:#333;
  top:50%;
  left:50%;
  margin-left:-220px;
  margin-top:-40px;
  
  position:absolute;
  box-shadow:
    30px 0px 0px 0px #fff,
    90px 0px 0px 0px #fff,
    160px 0px 0px 0px #fff,
    170px 0px 0px 0px #fff,
    260px 0px 0px 0px #fff,
    270px 0px 0px 0px #fff,
    280px 0px 0px 0px #fff,
    290px 0px 0px 0px #fff,
    370px 0px 0px 0px #fff,
    420px 0px 0px 0px #fff,
    
    40px 10px 0px 0px #fff,
    80px 10px 0px 0px #fff,
    150px 10px 0px 0px #fff,
    160px 10px 0px 0px #fff,
    170px 10px 0px 0px #fff,
    180px 10px 0px 0px #fff,
    230px 10px 0px 0px #fff,
    240px 10px 0px 0px #fff,
    250px 10px 0px 0px #fff,
    260px 10px 0px 0px #fff,
    270px 10px 0px 0px #fff,
    280px 10px 0px 0px #fff,
    290px 10px 0px 0px #fff,
    300px 10px 0px 0px #fff,
    310px 10px 0px 0px #fff,
    320px 10px 0px 0px #fff,
    380px 10px 0px 0px #fff,
    410px 10px 0px 0px #fff,
    
    30px 20px 0px 0px #fff,
    40px 20px 0px 0px #fff,
    50px 20px 0px 0px #fff,
    60px 20px 0px 0px #fff,
    70px 20px 0px 0px #fff,
    80px 20px 0px 0px #fff,
    90px 20px 0px 0px #fff,
    140px 20px 0px 0px #fff,
    150px 20px 0px 0px #fff,
    160px 20px 0px 0px #fff,
    170px 20px 0px 0px #fff,
    180px 20px 0px 0px #fff,
    190px 20px 0px 0px #fff,
    220px 20px 0px 0px #fff,
    230px 20px 0px 0px #fff,
    240px 20px 0px 0px #fff,
    250px 20px 0px 0px #fff,
    260px 20px 0px 0px #fff,
    270px 20px 0px 0px #fff,
    280px 20px 0px 0px #fff,
    290px 20px 0px 0px #fff,
    300px 20px 0px 0px #fff,
    310px 20px 0px 0px #fff,
    320px 20px 0px 0px #fff,
    330px 20px 0px 0px #fff,
    370px 20px 0px 0px #fff,
    380px 20px 0px 0px #fff,
    390px 20px 0px 0px #fff,
    400px 20px 0px 0px #fff,
    410px 20px 0px 0px #fff,
    420px 20px 0px 0px #fff,
    
    20px 30px 0px 0px #fff,
    30px 30px 0px 0px #fff,
    50px 30px 0px 0px #fff,
    60px 30px 0px 0px #fff,
    70px 30px 0px 0px #fff,
    90px 30px 0px 0px #fff,
    100px 30px 0px 0px #fff,
    130px 30px 0px 0px #fff,
    140px 30px 0px 0px #fff,
    160px 30px 0px 0px #fff,
    170px 30px 0px 0px #fff,
    190px 30px 0px 0px #fff,
    200px 30px 0px 0px #fff,
    220px 30px 0px 0px #fff,
    230px 30px 0px 0px #fff,
    240px 30px 0px 0px #fff,
    270px 30px 0px 0px #fff,
    280px 30px 0px 0px #fff,
    310px 30px 0px 0px #fff,
    320px 30px 0px 0px #fff,
    330px 30px 0px 0px #fff,
    360px 30px 0px 0px #fff,
    370px 30px 0px 0px #fff,
    390px 30px 0px 0px #fff,
    400px 30px 0px 0px #fff,
    420px 30px 0px 0px #fff,
    430px 30px 0px 0px #fff,
    
    10px 40px 0px 0px #fff,
    20px 40px 0px 0px #fff,
    30px 40px 0px 0px #fff,
    40px 40px 0px 0px #fff,
    50px 40px 0px 0px #fff,
    60px 40px 0px 0px #fff,
    70px 40px 0px 0px #fff,
    80px 40px 0px 0px #fff,
    90px 40px 0px 0px #fff,
    100px 40px 0px 0px #fff,
    110px 40px 0px 0px #fff,
    130px 40px 0px 0px #fff,
    140px 40px 0px 0px #fff,
    150px 40px 0px 0px #fff,
    160px 40px 0px 0px #fff,
    170px 40px 0px 0px #fff,
    180px 40px 0px 0px #fff,
    190px 40px 0px 0px #fff,
    200px 40px 0px 0px #fff,
    220px 40px 0px 0px #fff,
    230px 40px 0px 0px #fff,
    240px 40px 0px 0px #fff,
    250px 40px 0px 0px #fff,
    260px 40px 0px 0px #fff,
    270px 40px 0px 0px #fff,
    280px 40px 0px 0px #fff,
    290px 40px 0px 0px #fff,
    300px 40px 0px 0px #fff,
    310px 40px 0px 0px #fff,
    320px 40px 0px 0px #fff,
    330px 40px 0px 0px #fff,
    350px 40px 0px 0px #fff,
    360px 40px 0px 0px #fff,
    370px 40px 0px 0px #fff,
    380px 40px 0px 0px #fff,
    390px 40px 0px 0px #fff,
    400px 40px 0px 0px #fff,
    410px 40px 0px 0px #fff,
    420px 40px 0px 0px #fff,
    430px 40px 0px 0px #fff,
    440px 40px 0px 0px #fff,
    
    10px 50px 0px 0px #fff,
    30px 50px 0px 0px #fff,
    40px 50px 0px 0px #fff,
    50px 50px 0px 0px #fff,
    60px 50px 0px 0px #fff,
    70px 50px 0px 0px #fff,
    80px 50px 0px 0px #fff,
    90px 50px 0px 0px #fff,
    110px 50px 0px 0px #fff,
    150px 50px 0px 0px #fff,
    180px 50px 0px 0px #fff,
    250px 50px 0px 0px #fff,
    260px 50px 0px 0px #fff,
    290px 50px 0px 0px #fff,
    300px 50px 0px 0px #fff,
    350px 50px 0px 0px #fff,
    370px 50px 0px 0px #fff,
    380px 50px 0px 0px #fff,
    390px 50px 0px 0px #fff,
    400px 50px 0px 0px #fff,
    410px 50px 0px 0px #fff,
    420px 50px 0px 0px #fff,
    440px 50px 0px 0px #fff,
    
    10px 60px 0px 0px #fff,
    30px 60px 0px 0px #fff,
    90px 60px 0px 0px #fff,
    110px 60px 0px 0px #fff,
    140px 60px 0px 0px #fff,
    160px 60px 0px 0px #fff,
    170px 60px 0px 0px #fff,
    190px 60px 0px 0px #fff,
    240px 60px 0px 0px #fff,
    270px 60px 0px 0px #fff,
    280px 60px 0px 0px #fff,
    310px 60px 0px 0px #fff,
    350px 60px 0px 0px #fff,
    380px 60px 0px 0px #fff,
    410px 60px 0px 0px #fff,
    440px 60px 0px 0px #fff,
    
    40px 70px 0px 0px #fff,
    50px 70px 0px 0px #fff,
    70px 70px 0px 0px #fff,
    80px 70px 0px 0px #fff,
    130px 70px 0px 0px #fff,
    150px 70px 0px 0px #fff,
    180px 70px 0px 0px #fff,
    200px 70px 0px 0px #fff,
    250px 70px 0px 0px #fff,
    300px 70px 0px 0px #fff,
    370px 70px 0px 0px #fff,
    420px 70px 0px 0px #fff;
    
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console