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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

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

Packages

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.

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.

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.

HTML

              
                <div class="css-shape"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum libero arcu, nec eleifend eros aliquet non. Vestibulum eget pharetra ligula, pharetra lacinia mi. Cras dictum neque dapibus velit tincidunt, eu adipiscing est dapibus. Etiam in vehicula quam. Suspendisse diam urna, feugiat et rhoncus vel, molestie sed risus. Vivamus laoreet leo id magna posuere, at aliquam arcu tempor. Morbi tristique accumsan felis nec sollicitudin. Mauris sed leo vulputate, euismod lorem vitae, feugiat urna. Aliquam a massa sed enim cursus cursus non auctor nisl. Aliquam rutrum nunc varius mauris interdum imperdiet sit amet eu risus.</p>
<p>Suspendisse lectus leo, varius sed feugiat ac, commodo vel mi. Mauris egestas ultricies ultrices. Donec a semper magna, ac gravida ipsum. Pellentesque eget enim eu purus tempus tristique quis tempus arcu. Nullam porta ipsum quis leo luctus, quis porttitor ante commodo. Nullam mi urna, bibendum id leo sit amet, ullamcorper lacinia est. Nullam laoreet nibh vitae ornare malesuada. Nam rutrum diam id enim sagittis, vel scelerisque arcu fringilla. Mauris ac nisi quam.</p>
<p>Duis in eros sed nisl condimentum varius ac ac augue. Nullam fringilla porta nibh in porttitor. Nulla facilisi. Integer dui turpis, faucibus non velit non, tristique dapibus arcu. Pellentesque in nunc tristique, faucibus mi ut, congue libero. Nam ut ultricies nibh. Integer quis pretium metus. Ut non ipsum et orci scelerisque fermentum ut sed nisl. Suspendisse varius blandit ultricies. Duis nec elit bibendum, pharetra sem quis, iaculis ante. Integer non elit interdum, pretium augue id, ullamcorper sem.</p>
<p>Quisque scelerisque, libero id venenatis luctus, diam tellus pharetra tellus, ac tempor quam nulla sed lectus. Donec sed aliquet massa. Aliquam vestibulum eleifend ultricies. Donec egestas, risus vitae imperdiet lobortis, ligula risus laoreet tellus, sit amet venenatis quam augue eget orci. Donec vitae blandit massa. Suspendisse ultrices, risus in vehicula dignissim, mauris erat malesuada nisi, ut cursus augue mauris quis nunc. Donec sodales venenatis quam, nec ultricies metus. Proin eget molestie massa, id fermentum sem. Proin lacinia ante turpis, quis ullamcorper ipsum mollis vel. Morbi urna orci, varius eu posuere faucibus, faucibus id arcu. Praesent elementum et ante ac ultrices. Etiam nec ligula nibh. Nulla cursus enim in sem venenatis, at condimentum neque hendrerit. Nam nulla lacus, feugiat at sapien quis, tempus blandit quam.</p>
<p>Cras in feugiat urna. Nam nec pulvinar lectus. Phasellus vehicula commodo purus, nec tincidunt tortor laoreet id. Quisque vitae elit dapibus, pellentesque diam tempus, placerat tortor. Cras eget est id erat auctor commodo nec et dolor. Curabitur iaculis id magna eu fermentum. Nullam nec pharetra libero. Quisque auctor est nulla, vulputate bibendum augue accumsan ac. Aliquam pellentesque metus ac dolor venenatis sollicitudin. Duis et laoreet lacus. Vestibulum venenatis nec augue et lacinia. Suspendisse eleifend blandit quam vel adipiscing. Vestibulum non nisl id lectus convallis vulputate imperdiet et augue. Cras convallis dapibus lacus, in fermentum sem suscipit sit amet. Proin eu imperdiet sem, eget convallis purus. Ut feugiat porta diam vehicula commodo.</p>
              
            
!

CSS

              
                * {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
  margin: 20px;
}
p {
  font: 13px/150% sans-serif;
  color: #444;
  word-break: break-all; /* USED TO ILLUSTRATE EFFECT MORE CLEARLY */
}
.css-shape {
  position: relative;
  float: right;
  width: 500px;
  height: 250px;
  margin: 20px;
  -webkit-shape-outside: ellipse(250px 125px at 50% 50%);
  shape-outside: ellipse(250px 125px at 50% 50%);
  -webkit-shape-margin: 20px;
  shape-margin: 20px;
  background: rgba(0,0,0,.1);

}
.css-shape:after { /* DEMONSTRATES SHAPE */
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
  background: rgba(99,89,125,.25);
  border: 20px solid rgba(99,89,125,.25);
  border-radius: 50%;
}
              
            
!

JS

              
                
              
            
!
999px

Console