Pen Settings



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


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


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.


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.


                <div id="mushroom-wrap">
  <div id="mushroom"></div>


                #mushroom-wrap {
	#mushroom {
			8px 0 black,
			16px 0 black,
			24px 0 black,
			32px 0 black,
			40px 0 black,
			-16px 8px black,
			-8px 8px black,
			0px 8px black,
			8px 8px white,
			16px 8px red,
			24px 8px red,
			32px 8px white,
			40px 8px black,
			48px 8px black,
			56px 8px black,
			-24px 16px black,
			-16px 16px black,
			-8px 16px white,
			0px 16px white,
			8px 16px white,
			16px 16px red,
			24px 16px red,
			32px 16px white,
			40px 16px white,
			48px 16px white,
			56px 16px black,
			64px 16px black,
			-32px 24px black,
			-24px 24px black,
			-16px 24px red,
			-8px 24px white,
			0px 24px white,
			8px 24px red,
			16px 24px red,
			24px 24px red,
			32px 24px red,
			40px 24px white,
			48px 24px white,
			56px 24px red,
			64px 24px black,
			72px 24px black,
			-32px 32px black,
			-24px 32px white,
			-16px 32px red,
			-8px 32px red,
			0px 32px red,
			8px 32px red,
			16px 32px red,
			24px 32px red,
			32px 32px red,
			40px 32px red,
			48px 32px red,
			56px 32px red,
			64px 32px white,
			72px 32px black,
			-40px 40px black,
			-32px 40px black,
			-24px 40px white,
			-16px 40px white,
			-8px 40px red,
			0px 40px red,
			8px 40px white,
			16px 40px white,
			24px 40px white,
			32px 40px white,
			40px 40px red,
			48px 40px red,
			56px 40px white,
			64px 40px white,
			72px 40px black,
			80px 40px black,
			-40px 48px black,
			-32px 48px white,
			-24px 48px white,
			-16px 48px white,
			-8px 48px red,
			0px 48px white,
			8px 48px white,
			16px 48px white,
			24px 48px white,
			32px 48px white,
			40px 48px white,
			48px 48px red,
			56px 48px white,
			64px 48px white,
			72px 48px white,
			80px 48px black,
			-40px 56px black,
			-32px 56px white,
			-24px 56px white,
			-16px 56px white,
			-8px 56px red,
			0px 56px white,
			8px 56px white,
			16px 56px white,
			24px 56px white,
			32px 56px white,
			40px 56px white,
			48px 56px red,
			56px 56px white,
			64px 56px white,
			72px 56px white,
			80px 56px black,
			-40px 64px black,
			-32px 64px white,
			-24px 64px white,
			-16px 64px red,
			-8px 64px red,
			0px 64px white,
			8px 64px white,
			16px 64px white,
			24px 64px white,
			32px 64px white,
			40px 64px white,
			48px 64px red,
			56px 64px red,
			64px 64px white,
			72px 64px white,
			80px 64px black,
			-40px 72px black,
			-32px 72px red,
			-24px 72px red,
			-16px 72px red,
			-8px 72px red,
			0px 72px red,
			8px 72px white,
			16px 72px white,
			24px 72px white,
			32px 72px white,
			40px 72px red,
			48px 72px red,
			56px 72px red,
			64px 72px red,
			72px 72px red,
			80px 72px black,
			-40px 80px black,
			-32px 80px red,
			-24px 80px red,
			-16px 80px black,
			-8px 80px black,
			0px 80px black,
			8px 80px black,
			16px 80px black,
			24px 80px black,
			32px 80px black,
			40px 80px black,
			48px 80px black,
			56px 80px black,
			64px 80px red,
			72px 80px red,
			80px 80px black,
			-40px 88px black,
			-32px 88px black,
			-24px 88px black,
			-16px 88px black,
			-8px 88px white,
			0px 88px white,
			8px 88px black,
			16px 88px white,
			24px 88px white,
			32px 88px black,
			40px 88px white,
			48px 88px white,
			56px 88px black,
			64px 88px black,
			72px 88px black,
			80px 88px black,
			-32px 96px black,
			-24px 96px black,
			-16px 96px white,
			-8px 96px white,
			0px 96px white,
			8px 96px black,
			16px 96px white,
			24px 96px white,
			32px 96px black,
			40px 96px white,
			48px 96px white,
			56px 96px white,
			64px 96px black,
			72px 96px black,
			-24px 104px black,
			-16px 104px white,
			-8px 104px white,
			0px 104px white,
			8px 104px white,
			16px 104px white,
			24px 104px white,
			32px 104px white,
			40px 104px white,
			48px 104px white,
			56px 104px white,
			64px 104px black,
			-24px 112px black,
			-16px 112px black,
			-8px 112px white,
			0px 112px white,
			8px 112px white,
			16px 112px white,
			24px 112px white,
			32px 112px white,
			40px 112px white,
			48px 112px white,
			56px 112px black,
			64px 112px black,
			-16px 120px black,
			-8px 120px black,
			0px 120px black,
			8px 120px black,
			16px 120px black,
			24px 120px black,
			32px 120px black,
			40px 120px black,
			48px 120px black,
			56px 120px black;