cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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-image: 
  radial-gradient(circle at 100% 150%,
    /* inner, outer */
    orange 18%, orangered 24%,
    orangered 25%, red 28%,
    red 29%, darkred 36%,
    darkred 36%, gold 40%,
    transparent 40%, transparent),
    
  radial-gradient(circle at 0 150%,
    /* inner, outer */
    orange 18%, orangered 24%,
    orangered 25%, red 28%,
    red 29%, darkred 36%,
    darkred 36%, yellow 40%,
    transparent 40%, transparent),
    
  radial-gradient(circle at 50% 100%,
    white 0%, lightyellow 10%,
    /* inner, outer */
    yellow 11%, gold 23%,
    gold 24%, orange 30%,
    orange 31%, orangered 43%,
    orangered 44%, red 50%,
    red 51%, darkred 63%,
    darkred 64%, yellow 71%,
    transparent 71%, transparent),
    
  radial-gradient(circle at 100% 50%,
    white 0%, lightyellow 5%,
    /* inner, outer */
    yellow 10%, gold 15%,
    gold 16%, orange 20%,
    orange 21%, orangered 30%,
    orangered 31%, red 35%,
    red 36%, darkred 45%,
    darkred 46%, yellow 49%,
    transparent 50%, transparent),
    
  radial-gradient(circle at 0 50%,
    white 0%, lightyellow 5%,
    /* inner, outer */
    yellow 10%, gold 15%,
    gold 16%, orange 20%,
    orange 21%, orangered 30%,
    orangered 31%, red 35%,
    red 36%, darkred 45%,
    darkred 46%, yellow 49%,
    transparent 50%, transparent);
  background-size: 100px 50px;
}
            
          
!
999px
Loading ..................

Console