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.

            
              .sponge-bob {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMzAwLjAwMDAwMHB0IiBoZWlnaHQ9IjMwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDMwMC4wMDAwMDAgMzAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8bWV0YWRhdGE+CkNyZWF0ZWQgYnkgcG90cmFjZSAxLjEwLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMQo8L21ldGFkYXRhPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzMDAuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMTk1OSAyNTQ2IGMtMTUgLTE0IC0yNzAgLTU5IC00NjQgLTgyIC0yNTQgLTI5IC00MzQgLTI4IC01MzcgMyAtNjAKMTggLTE1NiAxNCAtMjc2IC0xMiAtNDAgLTggLTEwMiAtMTUgLTEzNyAtMTUgLTM1IDAgLTY3IC01IC03MCAtMTEgLTE5IC0zMAo1MyAtMzIgMjEyIC00IDE2NiAyOCAyMTEgMzAgMjY4IDExIDIyIC03IDkyIC0xNiAxNTUgLTE5IDE3NSAtOSA3MDUgNDcgNzk5Cjg1IDQ1IDE4IDI1OSAyNyAzOTEgMTcgNjkgLTUgMTgxIC0yMiAyNTAgLTM3IGwxMjQgLTI3IDE4IC00OSBjOSAtMjcgMzUgLTcwCjU3IC05NiAyOCAtMzQgNDEgLTU4IDQxIC03OSAwIC0xNiAtMTYgLTEwOCAtMzUgLTIwMyAtMTkgLTk1IC00MSAtMjI3IC01MAotMjkzIC0yNiAtMTg0IC02MiAtMzU1IC0xMDYgLTQ5MyAtODQgLTI2NiAtMTI0IC01MDMgLTEzOSAtODM3IC04IC0xODggLTQKLTIyMyAyMyAtMTk3IDggOSAxNCA3NyAxOSAyMzAgOSAzMDggNDIgNTA5IDEyNyA3ODAgNTIgMTY1IDc2IDI2OCA5NiA0MjIgOQo2OSAzMyAyMTEgNTIgMzE1IDE5IDEwNSAzNyAyMTYgNDAgMjQ3IDUgNTUgNCA1OCAtNDEgMTE1IC0yNSAzMyAtNTMgODAgLTYyCjEwNSAtOCAyNiAtMjIgNDkgLTMwIDUyIC0yNCA5IC0yMzQgNTUgLTMwNCA2NiAtNjEgOSAtNDEyIDE1IC00MjEgNnoiLz4KPHBhdGggZD0iTTM5NiAyMzgwIGMtMzMgLTEwIC02MiAtMjQgLTY3IC0zMSAtNCAtNyAtMTAgLTM2IC0xNCAtNjUgLTQgLTMyCi0yMiAtODQgLTQ2IC0xMjkgLTIxIC00MiAtMzkgLTgyIC0zOSAtODkgMCAtOCAtMTMgLTQ1IC0zMCAtODQgLTQ5IC0xMTYgLTYwCi0yMTAgLTYwIC01MjEgMCAtMjA3IDQgLTMwMCAxNiAtMzcxIDEyIC03MiAxNiAtMTU2IDE1IC0zNDUgLTIgLTI1OCAtOSAtMzUwCi0zNiAtNDI0IC0xNiAtNDUgLTEyIC04NSA3IC03OSAxOCA2IDQ3IDEzNiA1OSAyNjYgMTQgMTUzIDYgNDcyIC0xNSA1OTcgLTEyCjY3IC0xNiAxNjAgLTE2IDM2NSAxIDMxMyA5IDM3OCA2NSA1MjcgMjAgNTQgNDEgMTEwIDQ3IDEyNSA1IDE1IDIxIDQxIDM0IDU5CjE1IDIxIDI0IDQ2IDI0IDcwIDAgNzcgMjIgOTYgMTI1IDExMSAyMyA0IDI3IDMyIDUgMzUgLTggMSAtNDIgLTYgLTc0IC0xN3oiLz4KPHBhdGggZD0iTTEyNjIgMjMxOCBjLTcgLTM5IC04IC02NiAtMiAtNzIgMTAgLTEwIDEyIC01IDI5IDU5IDE0IDU0IDE0IDc1IC0yCjc1IC05IDAgLTE4IC0yMyAtMjUgLTYyeiIvPgo8cGF0aCBkPSJNOTM2IDIzMzEgYy03IC0xMSAyMSAtMTEwIDM1IC0xMjUgMTQgLTE2IDEwIC0yNiAtOCAtMjYgLTQwIDAgLTE0NwotNjMgLTIxMCAtMTIyIC05MiAtODkgLTEwNiAtMTIwIC0xMDEgLTIyNyAyIC03MyA4IC05NyAzNiAtMTUzIDYxIC0xMjUgMjA0Ci0yNTAgMzEwIC0yNzMgMTcgLTMgMzIgLTEzIDMyIC0yMCAwIC03IDEyIC0yMyAyOCAtMzQgbDI3IC0yMCAtNTAgLTEgYy01OCAwCi0yMzUgNDQgLTM4NSA5NiAtNjUgMjIgLTE0MSA0MCAtMjAxIDQ3IC04NyAxMCAtOTggOSAtMTM0IC05IC01MiAtMjYgLTc1IC03MgotNzUgLTE1MCAwIC01MyA1IC02OSAzMiAtMTEwIDYwIC04NyAxNzAgLTEyMSA0MTIgLTEyNiA4MCAtMiAxNDYgLTQgMTQ2IC01IDAKLTEwIC0xOTAgLTk1IC0yMjkgLTEwNCAtNTQgLTExIC02OSAtMjkgLTQzIC01MiAyOCAtMjUgNzAgLTM3IDEzMiAtMzcgNTMgMAo2MyAtNCAxMjEgLTQ3IDM1IC0yNSAxMzQgLTExNCAyMTkgLTE5NyAxMjQgLTEyMSAxNjkgLTE1OCAyMjIgLTE4NCAxMjggLTYzCjI0NiAtNTQgNDIzIDMzIDEwMyA1MCAxNDcgODkgMjQyIDIxNSAyMjQgMjk0IDIxNCAyNzggMjM0IDM3OCA3IDMyIDkgNzQgNSA5NQotMTIgNjMgLTI5IDY0IC0xODIgNiAtNzQgLTI4IC0xNzQgLTYxIC0yMjIgLTc0IC0xMzAgLTM1IC00MzYgLTEwMiAtNTI3IC0xMTUKLTQ0IC03IC0xMjUgLTIwIC0xODEgLTMxIC0xNjQgLTMxIC0yNTMgLTQwIC0yNzYgLTI4IC0xNCA4IC0yMyA4IC0zMSAwIC0xMwotMTMgLTkzIC0xMyAtMTIyIC0xIC0xNyA3IC0xNiA5IDEwIDkgMzYgMSAxMDQgMzIgMTk5IDg5IGw2OCA0MiAxMTcgMSBjMTIyIDAKMTg2IDE0IDE4NiAzOSAwIDEzIC00OCAxNiAtMzUwIDIxIC0zMjUgNSAtMzU1IDcgLTQxNiAyNyAtNTAgMTcgLTc2IDMyIC0xMDQKNjMgLTM2IDQwIC0zNyA0NCAtMzMgMTAwIDMgMzkgMTEgNjUgMjQgODAgMTcgMjAgMjYgMjEgMTA5IDE2IDY5IC00IDExOCAtMTQKMjEwIC00NSA2NiAtMjIgMTcwIC01MiAyMzAgLTY3IDExNyAtMjkgMTI0IC0yOSAzOTEgLTYgMTEwIDkgMTk1IDQwIDI0NSA4NwoxNSAxNCA0OCAzMSA3NSAzOCA1MiAxMyA2OSAzNCAzNCA0MyBsLTIxIDYgMjUgMjYgYzI4IDI5IDg2IDEzNSA4NiAxNTcgMCA4IDUKMTQgMTAgMTQgNiAwIDEwIC0xMCAxMCAtMjIgMCAtMzUgNDcgLTEyOSA4MyAtMTY2IDE4IC0xOSA0OCAtNDIgNjcgLTUyIDM3Ci0xOSAxNjYgLTQ5IDIxNyAtNTEgbDI4IC0xIC0zMSAtNyBjLTQwIC0xMCAtNTQgLTE5IC01NCAtMzYgMCAtMjUgMjAgLTI3IDc1Ci02IDEwMiAzOCAxNzAgNzkgMjY3IDE2MCAxMTUgOTcgMTQ4IDEzNSAxOTAgMjE5IDUxIDEwMiA0OCAyMDkgLTcgMjkwIGwtMjQKMzUgMzQgMzkgYzMzIDM2IDQ1IDY4IDI3IDY4IC01IDAgLTIzIC0yMCAtNDIgLTQ1IGwtMzMgLTQ0IC0zMCAyNSBjLTgyIDY5Ci0yMTMgMTA5IC0zMjcgMTAxIC00MiAtMyAtODQgLTkgLTkzIC0xMyAtMTUgLTUgLTE3IDIgLTE3IDU2IDAgNTMgLTIgNjEgLTE3CjU4IC0xNSAtMyAtMTggLTE0IC0xOCAtNjUgbDAgLTYyIC00OCAtMjEgYy02NiAtMzAgLTE2MSAtOTUgLTE5MiAtMTMyIC0xNAotMTcgLTI3IC0yOSAtMjkgLTI3IC0xIDIgLTggMTkgLTE1IDM2IC0xNyA0MyAtNTMgNzcgLTEyMSAxMTcgLTcwIDQxIC0xMzEgNjIKLTI0MCA4MSAtNzEgMTMgLTEwOCAxNCAtMjE4IDQgLTc0IC02IC0xMzcgLTggLTE0MCAtNCAtNCA0IC0xNiAzNCAtMjcgNjggLTE5CjU5IC0zNiA3OSAtNDkgNTh6IG00ODkgLTE4OCBjMTM0IC0zMCAyNTQgLTEwOSAyNzEgLTE3OSA4IC0zMiAtMiAtMTU4IC0xNwotMjIyIC0yMCAtNzkgLTYzIC0xNjQgLTExNiAtMjI3IC00NyAtNTYgLTU3IC02MyAtMTQ5IC05NyAtMTg4IC03MSAtMjU5IC04MQotMzEwIC00MyAtMTcgMTMgLTE0IDE0IDMzIDggMzUgLTQgNTggLTIgNjcgNiAyOCAyNCA2IDM4IC02NyA0NSAtMTk1IDE4IC0zMjQKMTA1IC00MDYgMjcxIC0yNiA1MiAtMzEgNzQgLTMxIDEzNCAwIDQyIDYgODMgMTQgOTkgMjAgMzggMTI0IDEzNiAxNzIgMTYwCjEzMSA2NyAzNTggODYgNTM5IDQ1eiBtOTEwIC0zNCBjMTIyIC00NSAxOTIgLTExNyAyMTUgLTIyMCAxMSAtNDkgMTAgLTYzIC01Ci0xMDggLTMzIC0xMDAgLTEwMCAtMTgwIC0yNTUgLTMwMiAtNjMgLTUwIC0xNDAgLTkxIC0xNDAgLTc1IDAgOSAtMjMgMTUgLTcyCjE5IC0xMzQgMTIgLTIyMCA0OSAtMjY1IDExNSAtNjcgMTAwIC05MCAyOTEgLTQ1IDM3OSA0NyA5MSAyMTggMTk1IDM0NyAyMTEKODcgMTEgMTU1IDUgMjIwIC0xOXogbS01OTggLTE4MSBjLTMgLTggLTYgLTUgLTYgNiAtMSAxMSAyIDE3IDUgMTMgMyAtMyA0Ci0xMiAxIC0xOXogbS0xNyAtMjE4IGMwIC0xMSAtNCAtMjAgLTEwIC0yMCAtNSAwIC0xMCA5IC0xMCAyMCAwIDExIDUgMjAgMTAKMjAgNiAwIDEwIC05IDEwIC0yMHogbS0xNDAgLTI1MCBjMCAtNSAtNyAtMTAgLTE2IC0xMCAtOCAwIC0xMiA1IC05IDEwIDMgNgoxMCAxMCAxNiAxMCA1IDAgOSAtNCA5IC0xMHogbS00OTcgLTUwIGM4IDAgNyAtNCAtMSAtMTIgLTkgLTkgLTE2IC04IC0zMCA2Ci0xNiAxOCAtMTYgMTkgMSAxMiAxMCAtMyAyNCAtNiAzMCAtNnogbTM4MyAtMTggYy0xMCAtMTYgLTEzMCAtNjAgLTE3NSAtNjUKLTIzIC0yIC0zOSAtMiAtMzcgMCAyIDMgNDggMjAgMTAxIDM4IDU0IDE5IDEwMCAzNyAxMDMgNDAgOCA4IDE1IC0yIDggLTEzegptLTMzMSAtNTggYzIyIC05IDAgLTI0IC0zNSAtMjQgLTI0IDEgLTI0IDEgLTYgMTUgMjMgMTcgMjAgMTcgNDEgOXogbTk3NQotMTk3IGMwIC01MiAtMjcgLTEzMSAtNjMgLTE4MSAtMjE0IC0zMDIgLTI3NSAtMzY5IC0zODggLTQyNiAtMTU3IC04MCAtMjYyCi05MCAtMzc0IC0zNyBsLTcwIDM0IDM1IDIyIGMxOSAxMSA1OSAyOSA4OCAzOCA0OCAxNiA1NSAxNiA2MyAyIDIzIC00MiA0OAotNjQgNTkgLTUzIDkgOSA4IDE5IC00IDQyIC05IDE3IC0xNiAzMyAtMTYgMzcgMCAzIDM3IDUgODMgNSA2MCAwIDk0IC02IDEyNgotMjAgNTIgLTI0IDUxIC0yNCA1MSAtNSAwIDMzIC02MCA1MCAtMTgwIDUxIC02MyAxIC0xMTkgLTIgLTEyNSAtNiAtNSAtNCAtMzUKLTE1IC02NSAtMjUgLTMwIC0xMCAtNzMgLTMwIC05NiAtNDUgbC00MSAtMjcgLTE3NSAxNzMgLTE3NiAxNzQgNDEgMCBjMjMgMAo4NSA5IDEzNyAxOSA1MiAxMSA5NiAxOCA5OCAxNiAyIC0xIC0xOCAtMzMgLTQzIC03MCAtMjYgLTM3IC00NCAtNzMgLTQxIC04MAo2IC0xNyA1OCAtMjUgMTY4IC0yNyAxMDggLTIgMTEzIDIgMTY0IDEyNiBsMzggOTMgMTI1IDI3IGMxODUgNDAgMzUzIDkwIDQ2MQoxMzUgNTIgMjIgMTAxIDQwIDEwOCA0MSA3IDAgMTIgLTEzIDEyIC0zM3ogbS0xMjM5IC00NiBjLTggLTUgLTIwIC03IC0yOCAtNAotMjEgOCAtMTUgMTMgMTUgMTMgMjAgMCAyMyAtMyAxMyAtOXogbTQ2NSAtMjA4IGMtNDYgLTExNCAtMzQgLTEwNyAtMTQ4IC0xMDAKLTU1IDMgLTEwMiA4IC0xMDUgMTAgLTMgMyA0IDE1IDE1IDI3IDE5IDIxIDQ2IDY5IDU2IDEwMyA0IDEzIDE3IDE3IDUzIDE4IDM4CjEgMTE4IDEwIDE1NCAxOCAzIDAgLTggLTM0IC0yNSAtNzZ6IG0tNTEwIC0yIGMwIC0xNiAtMyAtMTggLTIwIC05IC0yMCAxMQotMjAgMTEgLTEgMTkgMTEgNCAyMCA4IDIwIDggMSAxIDEgLTggMSAtMTh6Ii8+CjxwYXRoIGQ9Ik0xMjcwIDE5NzUgYzAgLTggMTEgLTE3IDI1IC0yMSA2OSAtMTcgOTggLTExNyA1MiAtMTg1IC0zOCAtNTYgLTgxCi03OSAtMTUxIC03OSAtMTA1IDEgLTE3NiA0NyAtMTc2IDExNyAwIDgwIDMwIDEwNSAxMzUgMTEzIDUzIDQgNzAgOSA3MCAyMCAwCjI1IC0xMDUgMjUgLTE1OSAxIC01NyAtMjUgLTgwIC02MCAtODAgLTEyNSAtMSAtOTMgNzIgLTE1NCAxOTcgLTE2MyA1NCAtNCA2OQotMSAxMTcgMjQgNDQgMjMgNjAgMzkgODIgODIgMzMgNjQgMzYgMTIyIDggMTY4IC0zMCA1MCAtMTIwIDg2IC0xMjAgNDh6Ii8+CjxwYXRoIGQ9Ik0xOTY1IDE5MzMgYy02MiAtMTUgLTEzNSAtMTE4IC0xMzUgLTE5MSAwIC04NSA3MiAtMTM3IDE5MSAtMTM2IDg3CjAgMTUwIDI1IDE5NCA3NiA0MiA1MCA1MiA5MiAzMiAxNDAgLTM0IDgyIC0xNzQgMTM3IC0yODIgMTExeiBtMTg1IC02MCBjODEKLTU4IDg4IC0xMTcgMjIgLTE4MyAtMzEgLTMxIC00OCAtMzkgLTEwNiAtNDkgLTU4IC0xMCAtNzUgLTEwIC0xMTcgNCAtNTQgMTgKLTg5IDU0IC04OSA5MiAwIDU0IDU2IDE0MiAxMDUgMTY0IDExIDUgNDggNyA4MyA0IDQ4IC0zIDcyIC0xMSAxMDIgLTMyeiIvPgo8cGF0aCBkPSJNMTc1MSA5NDMgYy0xMSAtMzggLTIxIC03NyAtMjMgLTg4IC00IC0yNCAtNTYgLTMxIC0xNTQgLTIwIGwtNjAgNgozMyAzNiBjMjcgMjggNzMgMTA0IDczIDEyMCAwIDIgLTcgMyAtMTUgMyAtOCAwIC0yNyAtMTkgLTQzIC00MiAtMTcgLTI0IC00MgotNTQgLTU3IC02OCAtNDAgLTM4IC00OCAtNTYgLTI5IC03NCAyMCAtMjEgMjU1IC0yNCAyNzIgLTMgMTEgMTMgNTIgMTU4IDUyCjE4MiAwIDggLTcgMTUgLTE1IDE1IC05IDAgLTIxIC0yNCAtMzQgLTY3eiIvPgo8cGF0aCBkPSJNMTY3MCAyMzAzIGMwIC05IC0yMCAtNDMgLTQ1IC03NCAtMjUgLTMyIC00NSAtNjIgLTQ1IC02OCAwIC02IDEyCi0xMSAyOCAtMTEgMjAgMCAyMyAzIDEzIDkgLTEyIDggLTggMTggMjEgNTMgNTcgNzAgNzIgMTA4IDQzIDEwOCAtOCAwIC0xNSAtOAotMTUgLTE3eiIvPgo8cGF0aCBkPSJNMjM5MiAyMjI3IGMtMjQgLTU3IC0yNyAtNzcgLTEyIC03NyAxMSAwIDYwIDk2IDYwIDExOCAwIDMwIC0yNyA3Ci00OCAtNDF6Ii8+CjwvZz4KPC9zdmc+Cg==");
}
            
          
!
999px
Loading ..................

Console