cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

              <div id="wrapper">
  <h3><span>Some Text</span></h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla mauris, mattis ac ullamcorper nec, convallis quis lectus. Phasellus elit sem, euismod eget placerat vel, elementum id lorem. Duis ullamcorper semper libero, malesuada tempus nulla volutpat eu. Vestibulum ante sapien, porttitor sit amet venenatis at, consectetur id eros. Suspendisse potenti. Nulla pellentesque malesuada fermentum. Integer lacinia augue eget purus faucibus laoreet.</p>
  <p>Sed nec lectus quis metus feugiat consequat. Quisque consequat, nisi quis tempus porta, tellus arcu semper est, non porttitor massa ipsum non magna. Aenean suscipit, neque non semper accumsan, orci felis accumsan purus, non placerat turpis nulla quis lorem. Nullam sit amet libero quis eros luctus convallis ac et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Sed sit amet est id nisi interdum facilisis in sed tellus. Aliquam pretium, purus id imperdiet imperdiet, enim augue ullamcorper augue, sed varius sapien libero sit amet risus.</p>
  <p>Pellentesque eget risus mi. Curabitur vel pulvinar velit. Suspendisse mattis faucibus diam et consequat. Morbi vulputate, nunc sit amet ultrices vulputate, elit quam blandit mi, in convallis erat libero ut nulla. Mauris lectus libero, vehicula et mattis id, sollicitudin sit amet augue. Quisque dictum commodo nibh, at aliquam sapien consequat ac. Suspendisse non tellus ac ligula imperdiet varius a eu erat. Morbi sit amet dui at magna posuere pharetra. Phasellus adipiscing bibendum lorem, id porttitor elit suscipit a. Pellentesque imperdiet nunc sed urna sollicitudin non adipiscing lectus accumsan.</p>
  <p>Vivamus sed neque a risus dignissim semper ut eu ligula. Quisque consequat neque augue. Sed scelerisque, dolor congue tempus gravida, est lacus cursus nisi, nec laoreet mauris nisl vitae nibh. Maecenas accumsan neque vitae mi feugiat ut mattis dolor accumsan. Nunc nec enim nec mauris scelerisque accumsan sed vitae arcu. Etiam dapibus ullamcorper urna non aliquet. Etiam nulla arcu, lobortis at hendrerit vel, rhoncus sed neque. Integer non est purus.</p>
  <p>Suspendisse ac turpis at augue iaculis cursus et euismod dui. Nunc non mauris nec tortor mollis auctor vel eu lectus. Vestibulum imperdiet consequat ante, id laoreet massa dapibus sit amet. Nunc felis leo, iaculis consectetur aliquet blandit, iaculis quis eros. Mauris a sapien vel felis tincidunt aliquet tempus sed felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ultrices pellentesque leo, at pharetra nisl sagittis a. Morbi pulvinar pharetra odio, at cursus ante vehicula a. Donec id nisi et leo placerat ornare. Maecenas augue enim, porttitor in molestie quis, fermentum a metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet quam quis ipsum placerat pulvinar at sed augue.</p>
              body {
  margin: 0;
  padding: 0;
  color: #fff;
  text-shadow: 1px 1px 3px #000;

#wrapper {
  background: url(http://lorempixel.com/1000/500/nature) no-repeat fixed top center;
  width: 960px;
  margin: 0 auto;
  padding: 100px 20px;
  overflow: hidden;

h3 {
  height: 4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  margin: 40px 0;
  line-height: 4px;

h3 span {
  background: url(http://lorempixel.com/1000/500/nature) no-repeat fixed top center;;
  padding: 4px 10px;
  font-size: 30px;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................