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.

  <span class="mdi mdi-android mdi-24px plain android"></span>
  <span class="mdi mdi-apple mdi-24px plain apple"></span>
  <span class="mdi mdi-deviantart mdi-24px plain deviantart"></span>
  <span class="mdi mdi-dribbble mdi-24px plain dribbble"></span>
  <span class="mdi mdi-facebook mdi-24px plain facebook"></span>
  <span class="mdi mdi-github-circle mdi-24px plain github"></span>
  <span class="mdi mdi-instagram mdi-24px plain instagram"></span>
  <span class="mdi mdi-snapchat mdi-24px plain snapchat"></span>
  <span class="mdi mdi-steam mdi-24px plain steam"></span>
  <span class="mdi mdi-twitter mdi-24px plain twitter"></span>
  <span class="mdi mdi-medium mdi-24px plain medium"></span>
  <span class="mdi mdi-playstation mdi-24px plain playstation"></span>
  <span class="mdi mdi-windows mdi-24px plain windows"></span>
  <span class="mdi mdi-wordpress mdi-24px plain wordpress"></span>
  <span class="mdi mdi-xbox mdi-24px plain xbox"></span>
<div style="margin-top: 6px;">
  <span class="mdi mdi-android mdi-24px round android"></span>
  <span class="mdi mdi-apple mdi-24px round apple"></span>
  <span class="mdi mdi-deviantart mdi-24px round deviantart"></span>
  <span class="mdi mdi-dribbble mdi-24px round dribbble"></span>
  <span class="mdi mdi-facebook mdi-24px round facebook"></span>
  <span class="mdi mdi-github-circle mdi-24px round github"></span>
  <span class="mdi mdi-instagram mdi-24px round instagram"></span>
  <span class="mdi mdi-snapchat mdi-24px round snapchat"></span>
  <span class="mdi mdi-steam mdi-24px round steam"></span>
  <span class="mdi mdi-twitter mdi-24px round twitter"></span>
  <span class="mdi mdi-medium mdi-24px round medium"></span>
  <span class="mdi mdi-playstation mdi-24px round playstation"></span>
  <span class="mdi mdi-windows mdi-24px round windows"></span>
  <span class="mdi mdi-wordpress mdi-24px round wordpress"></span>
  <span class="mdi mdi-xbox mdi-24px round xbox"></span>
<div style="margin-top: 6px;">
  <span class="mdi mdi-android mdi-24px box android"></span>
  <span class="mdi mdi-apple mdi-24px box apple"></span>
  <span class="mdi mdi-deviantart mdi-24px box deviantart"></span>
  <span class="mdi mdi-dribbble mdi-24px box dribbble"></span>
  <span class="mdi mdi-facebook mdi-24px box facebook"></span>
  <span class="mdi mdi-github-circle mdi-24px box github"></span>
  <span class="mdi mdi-instagram mdi-24px box instagram"></span>
  <span class="mdi mdi-snapchat mdi-24px box snapchat"></span>
  <span class="mdi mdi-steam mdi-24px box steam"></span>
  <span class="mdi mdi-twitter mdi-24px box twitter"></span>
  <span class="mdi mdi-medium mdi-24px box medium"></span>
  <span class="mdi mdi-playstation mdi-24px box playstation"></span>
  <span class="mdi mdi-windows mdi-24px box windows"></span>
  <span class="mdi mdi-wordpress mdi-24px box wordpress"></span>
  <span class="mdi mdi-xbox mdi-24px box xbox"></span>
              .mdi {
  color: #FFF;
  display: inline-block;
  padding: 6px;
  &.plain {
    color: #333;
    background: #F1F1F1;
    text-shadow: 0 1px 0 #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 5px;
  &.round {
    border-radius: 24px;
  &.box {
    border-radius: 6px;
.apple { background: #000; }
.android { background: #A4C439; }
.deviantart { background: #15D65A; }
.dribbble { background: #EF4A83; }
.etsy { background: #D65200; }
.evernote { background: #12AC54; }
.facebook { background: #3b5998; }
.github { background: #333; }
.instagram { background: #F34235; }
.kickstarter { background: #15D65A; }
.snapchat { background: #FFFB01; text-shadow: 0 0 1px #000; }
.steam { background: #222; }
.twitter { background: #1DA1F2; }
.medium { background: #444; }
.playstation { background: #154488; }
.windows { background: #0178D6; }
.wordpress { background: #188CBD; }
.xbox { background: #107C10; }
Loading ..................