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.

            
              black(alpha)
  rgba(0,0,0,alpha)
  
body
  background-color: #444
  position: relative
  height: 100vh
  
.entry
  position: absolute
  left: 50%
  top: 50%

  &:before,
  &:after
    display: block
    content: ''
    position: absolute
    
  &.vampire
    width: 130px
    height: 160px
    margin-left: -(@width/2)
    margin-top: -(@height/2)

    background-image: linear-gradient(to top, black(.1), black(.1)),
                      linear-gradient(to right, linen, linen),
                      radial-gradient(ellipse at center -10px, linen 50%, transparent 50%),
                      radial-gradient(ellipse at center -10px, linen 50%, transparent 50%)
    background-repeat: no-repeat
    background-size: 50px 15px,
                     50px 80%,
                     30px 40px,
                     30px 40px
    background-position: center 92%,
                         center 100%,
                         -2px 68%,
                         103% 68%

    &:before
      width: 100px
      height: 135px
      left: 15px
      background-color: #333
      background-image: radial-gradient(circle, #222 15%,
                                                tomato 15%,
                                                tomato 30%,
                                                white 30%,
                                                white 50%,
                                                transparent 50%),
                        radial-gradient(circle, #222 15%,
                                                tomato 15%,
                                                tomato 30%,
                                                white 30%,
                                                white 50%,
                                                transparent 50%),
                        radial-gradient(ellipse, black(.1) 50%, transparent 50%),
                        radial-gradient(ellipse, black(.1) 50%, transparent 50%),
                        linear-gradient(linen, linen),
                        radial-gradient(circle, linen 40%,
                                                darken(linen,15) 40%,
                                                darken(linen,15) 53%,
                                                transparent 42%),
                        linear-gradient(linen, linen),
                        linear-gradient(45deg, transparent 20%, white 20%),
                        linear-gradient(-45deg, transparent 20%, white 20%),
                        radial-gradient(ellipse, #333 50%, transparent 50%),
                        radial-gradient(circle, linen 50%, transparent 50%),
                        radial-gradient(circle, linen 50%, transparent 50%),
                        linear-gradient(to bottom, #222 34%, linen 34%)
      background-repeat: no-repeat
      background-size: 24px 24px,
                       24px 24px,
                       50px 40px,
                       50px 40px,
                       25px 13px,
                       25px 25px,
                       60px 15px,
                       8px 20px,
                       8px 20px,
                       65px 30px,
                       65px 80px,
                       65px 80px,
                       100% 100%
      background-position: 18px 70px,
                           56px 70px,
                           4px 62px,
                           44px 62px,
                           center 70%,
                           center 75%,
                           center 81%,
                           35px 85%,
                           57px 85%,
                           center 95%,
                           -6px 5px,
                           42px 5px,
                           0 0
      border-radius: 35px 35px 20px 20px

    &:after
      width: 36px
      height: 10px
      left: 25px
      top: 68px
      background-color: #222
      border-radius: 4px
      box-shadow: 42px 0 0 #222
            
          
!
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