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. 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

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="container">
  
</div>
              
            
!

CSS

              
                $t: transparent;
$bbk: #1FE0FF;
$bk: #211A23;
$bkl: #232323;
$bkll: #FBF7F5;



body {
  background: $bbk;
  font-size: 10px;
}

.container {
  width: 53em;
  height: 30em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // border: 1px solid red;
  background: 
// MAIN PART   
    linear-gradient( -30deg,
      rgba($bbk,.7) 30%,
      rgba(#fff,.7) 40%, 
      rgba($bbk,.2) 63%
    ) 
    50% 43.5% / 13em 4.8em, 
// tape
    radial-gradient(
        150% 150% at 0% 50%,
        #000.45em,
        #000 50%,
        $t 51%
      )
      40% 43.5% / 7em 7em,      
    linear-gradient(
      $bbk 63%, 
      $bbk 63%) 
    50% 43.5% / 13em 4.8em,          
    // inner circles
    // right sm   
    radial-gradient(
        100% 100% at 50% 50%,
        $bbk.45em,
        $bbk 50%,
        $t 51%
      )
      74% 43.85% / 4.8em 4.8em,    
    radial-gradient(
        100% 100% at 50% 50%,
        $bkll.45em,
        $bkll 50%,
        $t 51%
      )
      74.4% 43.5% / 5.5em 5.5em,
    // right lg     
    radial-gradient(
        100% 100% at 50% 50%,
        #000.45em,
        #000 50%,
        $t 51%
      )
      74.5% 43.5% / 6em 6em,   
    // left sm    
    radial-gradient(
        100% 100% at 50% 50%,
        $bbk.45em,
        $bbk 50%,
        $t 51%
      )
      26.45% 44% / 4.8em 4.8em,      
    radial-gradient(
        100% 100% at 50% 50%,
        $bkll.45em,
        $bkll 50%,
        $t 51%
      )
      26% 43.5% / 5.5em 5.5em,       
    // left lg    
    radial-gradient(
        100% 100% at 50% 50%,
        #000.45em,
        #000 50%,
        $t 51%
      )
      26% 43.5% / 6em 6em,     
    //   rounded corners  
      // LEFT    
    radial-gradient(
        100% 100% at 100% 50%,
        $bk 1.45em,
        $bk 1.5em,
        $bk 50%,
        $t 51%
      )
      16.5% 43.5% / 7em 7.4em,   
      // RIGHT      
    radial-gradient(
        100% 100% at 00% 50%,
        $bk 1.45em,
        $bk 1.5em,
        $bk 50%,
        $t 51%
      )
      83.8% 43.5% / 7em 7.4em,      
  // middle black part    
    linear-gradient(
      $bk 63%, 
      $bk 63%) 
    50% 43.5% / 24em 7.4em,     
  // gray lines  
    linear-gradient(
      #D3D3D3 63%, 
      #D3D3D3 63%) 
    50% 19% / 42em .2em,    
    linear-gradient(
      #D3D3D3 63%, 
      #D3D3D3 63%) 
    50% 26% / 42em .2em,     
  // Rainbow part   
    // pink    
    linear-gradient(
      #EF476F 63%, 
      #EF476F 63%) 
    50% 34.3% / 49em 1.5em,  
    // yellow    
    linear-gradient(
      #FFD166 63%, 
      #FFD166 63%) 
    50% 39.6% / 49em 1.5em,  
    // teal    
    linear-gradient(
      #06D6A0 63%, 
      #06D6A0 63%) 
    50% 44.8% / 49em 1.5em,      
    // blue    
    linear-gradient(
      #118AB2 63%, 
      #118AB2 63%) 
    50% 50% / 49em 1.5em,     
    // orange    
    linear-gradient(
      #ff9f1c 63%, 
      #ff9f1c 63%) 
    50% 55.2% / 49em 1.5em,     
  //     ROUNDED CORNERS
//     TOP RIGHT
    radial-gradient(
        200% 200% at 0% 100%,
        $bkll 1.45em,
        $bkll 1.5em,
        $bkll 50%,
        $bk 51%
      )
      96% 8% / 2em 2em,
//     TOP LEFT
    radial-gradient(
        200% 200% at 100% 100%,
        $bkll 1.45em,
        $bkll 1.5em,
        $bkll 50%,
        $bk 51%
      )
      4% 8% / 2em 2em,
//    BOTTOM LEFT
    radial-gradient(
        200% 200% at 100% 0%,
        $bkll 1.45em,
        $bkll 1.5em,
        $bkll 50%,
        $bk 51%
      )
      4% 68.5% / 2em 2em,
//    BOTTOM RIGHT
    radial-gradient(
        200% 200% at 0% 0%,
        $bkll 1.45em,
        $bkll 1.5em,
        $bkll 50%,
        $bk 51%
      )
      96% 68.5% / 2em 2em,       
// center rectangle    
    linear-gradient(
      $bkll 63%, 
      $bkll 63%) 
    50% 20% / 49em 19em,   
// END MAIN PART    
// BOTTOM PART 
  // trapezoid corners
    // left corner
    radial-gradient(
        210% 210% at 100% 100%,
        $bkl 1.45em,
        $bkl 1.5em,
        $bkl 50%,
        $bk 51%
      )
      24.5% 85% / 3em 3em,     
    // right corner
    radial-gradient(
        210% 210% at 0% 100%,
        $bkl 1.45em,
        $bkl 1.5em,
        $bkl 50%,
        $bk 51%
      )
      75.4% 85% / 3em 3em,    
  // center rect
    linear-gradient(
      $bkl 63%, 
      $bkl 63%) 
    50% 100% / 19em 7em,    
  // Left trapezoid
    linear-gradient(
      -70deg,
      $bkl 30%,
      $bkl 63%, 
      $bk 62%) 
    20% 100% / 8em 7em,
  // right trapezoid
    linear-gradient(
      70deg,
      $bkl 63%, 
      $t 63%) 
    80% 100% / 8em 7em, 
// END BOTTOM PART    
//     ROUNDED CORNERS
//     TOP RIGHT
    radial-gradient(
        200% 200% at 0% 100%,
        $bkl 1.45em,
        $bkl 1.5em,
        $bkl 50%,
        $bbk 51%
      )
      100% 0% / 2em 2em,
//     TOP LEFT
    radial-gradient(
        200% 200% at 100% 100%,
        $bk 1.45em,
        $bk 1.5em,
        $bk 50%,
        $bbk 51%
      )
      0% 0% / 2em 2em,  
//    BOTTOM LEFT
    radial-gradient(
        200% 200% at 100% 0%,
        $bk 1.45em,
        $bk 1.5em,
        $bk 50%,
        $bbk 51%
      )
      0% 100% / 2em 2em,
//    BOTTOM RIGHT
    radial-gradient(
        200% 200% at 0% 0%,
        $bk 1.45em,
        $bk 1.5em,
        $bk 50%,
        $bbk 51%
      )
      100% 100% / 2em 2em,    
//     MAIN BODY
    linear-gradient($bk, $bk) 50% 50% / 53em 30em;
  background-repeat: no-repeat;
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
  body {
  font-size: 6px;
  };
}

              
            
!

JS

              
                
              
            
!
999px

Console