Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              # Don't use gradient generators!

*(... or code generators in general, but this dissects the why in the case of gradient generators in particular)*

They produce code that is completely useless, code you may not need for your particular use case and way, way outdated support info in the comments.

For example, let's take this very simple gradient in the background from tan to gold.

The code generated by most gradient generators that show up on the first page of search results is usually something like this:

```
background: #d2b48c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyYjQ4YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ3MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #d2b48c 0%, #ffd700 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2b48c), color-stop(100%,#ffd700)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2b48c 0%,#ffd700 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2b48c', endColorstr='#ffd700',GradientType=0 ); /* IE6-8 */
```

## Problems

### The `-ms-` prefix is useless!

IE 10+/ Edge support gradients unprefixed, while IE 9 does not support them at all.

If you're really curious where the `-ms-` prefix comes from, it's because those were the days of people going all prefix-crazy and adding all possible prefixes for properties that sometimes never even needed certain prefixes. And while gradients did need the `-ms-` prefix for early IE 10 previews, later previews and the final IE 10 release unprefixed them (and I really, really doubt there's still anyone using an early IE 10 preview). But things like `-ms-border-radius`, `-o-border-radius`, `-moz-filter`, `-ms-filter` never even existed!

### Browser support info in the comments is outdated

Gradients are now supported unprefixed in *all* desktop browsers.

IE supports gradients unprefixed ever since they were first implemented (in IE 10).

Firefox supports gradients unprefixed since version 16. Current version is 42.

Opera supports gradients unprefixed since version 12. Current version is 32.

Chrome supports gradients unprefixed since version 26. Current version is 46.

Safari supports gradients unprefixed since version 7. Current version is 9.

So the correct comment for the unprefixed version as far as desktop browsers go would be:

```
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
```

### You probably don't really need most of those

If there are still people who are stuck on IE 9 or IE 8 or older, they are probably also stuck on 10+ years old hardware as well. Which would appreciate if you just stuck to the solid background fallback. **So you probably want to drop the older IE gradient fallback and just stick to the solid background one.**

Firefox 16, which unprefixed gradients, was released back in early October 2012, *more than 3 years ago* - how many people do you think still use a Firefox version from more than 3 years ago? Can I Use global stats show a total (for all versions before 16) around 0.25%. **It's safe to drop the `-moz-` prefixed version.**

Chrome made the switch from the ancient WebKit syntax back in 2011 and Safari in early 2012. What are the odds that someone is still using a Chrome version that's more than 4 years old or a Safari version that's more than 3.5 years old? Can I Use global stats show a combined total around 0.15%. **It's safe to drop the ancient WebKit syntax.**

Opera 12, which unprefixed gradients, was released in the summer of 2012, *more than 3 years ago* - how many people do you think still use an Opera version from more than 3 years ago? Again, looking at the Can I Use global stats, we see that the `-o-` prefix is useful to about 0.01%. **It's safe to drop the `-o-` prefixed version.**

Furthermore, Opera 15 (summer 2013, the first Opera version after the switch to Blink), had gradients unprefixed. So Opera hasn't needed a prefix for gradients since the summer of 2012.

Chrome 26 (unprefixing gradients) was released in March 2013, more than 2.5 years ago. Safari 7 (unprefixing gradients) was released in the autumn of 2013, more than 2 years ago. Can I Use global stats show a combined total of around 0.5% of users still needing the `-webkit-` prefix on desktop.

**So the last desktop browser to unprefix gradients was released more than 2 years ago. Gradients have been supported unprefixed on desktop for more than 2 years!**

For mobile, things get a bit more hairy, even though most mobile browsers have unprefixed gradients as well. So you may still want to keep the `-webkit-` prefixed version for this reason (though I personally like my working code to be as clean as possible and let prefixing be done by something like -prefix-free or Autoprefixer - by the way, CodePen provides this option as well). But even in this case, we're still left with only 3 lines of code:

```
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #d2b48c 0%,#ffd700 100%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
```

### You can do better

Because the first stop is by default at `0%`, the last stop is by default at `100%` and the default direction for both the old (prefixed) syntax and the new (unprefixed) syntax is from top to bottom:

```
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#d2b48c,#ffd700); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#d2b48c,#ffd700); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
```

Now compare the above to what we started from:

```
background: #d2b48c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyYjQ4YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ3MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #d2b48c 0%, #ffd700 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2b48c), color-stop(100%,#ffd700)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2b48c 0%,#ffd700 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2b48c', endColorstr='#ffd700',GradientType=0 ); /* IE6-8 */
```

And this is just one very simple gradient. The more gradients you have, the more useless code you'll have if you rely on gradient generators.

**So don't use gradient generators! Or just use them as a starting point, but don't just blindly copy paste the code they spit out!**

## **UPDATE**

[ColorZilla took note of this](https://twitter.com/colorzilla/status/664087229258596352) and took the `-ms-` prefixed version, the ancient WebKit version and the `-o-` prefixed version out of what gets generated by default.
            
          
!

CSS

            
              html {
	min-height: 100%;
	background: linear-gradient(tan, gold) fixed;
	font: 1em trebuchet ms, verdana, sans-serif;
}

body {
	margin: 0 auto;
	padding: .5em;
	width: 90%; max-width: 45em;
	background: rgba(#fff, .5);
}

h1 {
	color: crimson;
	text-align: center;
	text-transform: uppercase;
}

pre {
	display: block;
	overflow-x: scroll;
	padding: 1em .5em;
	background: rgba(#fff, .5);
}

code {
	color: darkmagenta;
	font: 700 1.25em monospace;
}

b, strong { color: mediumvioletred; }
            
          
!

JS

            
              
            
          
!
999px

Console