123

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <div id="wrapper">
<p>
  <span class="shape circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit elementum fringilla. Mauris laoreet risus enim, a tincidunt eros pulvinar ultrices. Maecenas sagittis nulla congue sem aliquet, a placerat est consequat. Morbi porttitor ante at tellus facilisis, eget commodo turpis porta. In non ipsum ex. Aenean in neque id lectus lacinia scelerisque sit amet id lectus. Ut gravida sem sit amet nunc suscipit, in scelerisque quam gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit elementum fringilla. Mauris laoreet risus enim, a tincidunt eros pulvinar ultrices. Maecenas sagittis nulla congue sem aliquet, a placerat est consequat. Morbi porttitor ante at tellus facilisis, eget commodo turpis porta. In non ipsum ex. Aenean in neque id lectus lacinia scelerisque sit amet id lectus. Ut gravida sem sit amet nunc suscipit, in scelerisque quam gravida.
</p>
<p><span class="shape ellipse"></span>
Duis quis tellus lacus. Nam ut mollis est. Mauris ornare eget nibh quis sagittis. Sed ut tor tor mo le st ie, auc tor leo et, mat tis ex. Cu rab itur el ei fe nd eg est as ex, a eff ici tur or ci auc tor ac. Int eg er iac ul is ve sti bu lum do lor auc tor mal esu ada. Cu ra bitur pos uere nibh vel euismod luctus. Vivamus nec augue dui. Duis consequat nisi quis od io accumsan mollis. Proin congue vitae nibh non eleifend. Donec sit amet feugiat dui. Aliquam euismod, risus quis semper consequat, nulla mauris tincidunt nibh, ac varius dolor ligula gravida dui. Vestibulum molestie molestie metus at porta. Nullam id neque lacus. Morbi interdum ante in lorem varius, nec ultricies augue tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit elementum fringilla. Mauris laoreet risus enim, a tincidunt eros pulvinar ultrices. Maecenas sagittis nulla congue sem aliquet, a placerat est consequat. Morbi porttitor ante at tellus facilisis, eget commodo turpis porta. In non ipsum ex. Aenean in neque id lectus lacinia scelerisque sit amet id lectus. Ut gravida sem sit amet nunc suscipit, in scelerisque quam gravida.
</p>
  
 <p><span class="shape rectangle"></span>
Proin in magna nibh. Sed sed varius justo. Etiam eu porta nunc, eget porttitor ante. Praesent nec tempus lectus. Curabitur molestie, purus at mollis pharetra, dui nisi dignissim diam, at vehicula odio purus ut nunc. Sed sed lobortis tortor. Nulla auctor velit lacus, ut aliquam massa imperdiet ut. Proin in magna nibh. Sed sed varius justo. Etiam eu porta nunc, eget porttitor ante. Praesent nec tempus lectus. Curabitur molestie, purus at mollis pharetra, dui nisi dignissim diam, at vehicula odio purus ut nunc. Sed sed lobortis tortor. Nulla auctor velit lacus, ut aliquam massa imperdiet ut. Proin in magna nibh. Sed sed varius justo. Etiam eu porta nunc, eget porttitor ante. Praesent nec tempus lectus. Curabitur molestie, purus at mollis pharetra, dui nisi dignissim diam, at vehicula odio purus ut nunc. Sed sed lobortis tortor. Nulla auctor velit lacus, ut aliquam massa imperdiet ut.
</p>
<p><span class="shape rounded-rectangle"></span>
Maecenas bibendum iaculis odio, non commodo purus molestie in. Sed sed metus eu purus molestie efficitur. Aliquam ac massa id quam sollicitudin euismod. Nulla eget nulla aliquet, congue orci sit amet, pellentesque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus bibendum augue erat, in congue nisl rhoncus consectetur. Praesent aliquam elit lacus, at dapibus nulla mollis sit amet. Donec ac ullamcorper purus. Nulla faucibus odio sodales lacinia gravida. Mauris fringilla tortor lacus, nec lacinia dui porttitor quis. Donec consectetur, odio in aliquam consectetur, urna velit scelerisque erat, sed viverra massa tellus nec leo. Aliquam mollis metus mauris. Phasellus orci tellus, pellentesque viverra libero posuere, elementum auctor leo. Proin a feugiat turpis. Nulla rhoncus ipsum augue, at iaculis odio convallis eu.
</p>
<p><span class="shape trapezoid"></span>
Proin in magna nibh. Sed sed varius justo. Etiam eu porta nunc, eget porttitor ante. Praesent nec tempus lectus. Curabitur molestie, purus at mollis pharetra, dui nisi dignissim diam, at vehicula odio purus ut nunc. Sed sed lobortis tortor. Nulla auctor velit lacus, ut aliquam massa imperdiet ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit elementum fringilla. Mauris laoreet risus enim, a tincidunt eros pulvinar ultrices. Maecenas sagittis nulla congue sem aliquet, a placerat est consequat. Morbi porttitor ante at tellus facilisis, eget commodo turpis porta. In non ipsum ex. Aenean in neque id lectus lacinia scelerisque sit amet id lectus. Ut gravida sem sit amet nunc suscipit, in scelerisque quam gravida.
</p>
  <img class="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1804713/image-shape.png">
<p>
Sed nec odio elit. Suspendisse pulvinar, nulla varius tempus feu giat, magna nulla feugiat neque, vel tempus nibh tellus nec metus. Vesti bulum et velit eu ligula tinc idunt vesti bulum. Aenean urna est, ullam corper ac tempus a, volu tpat et lacus. Vesti bulum at odio ac mi fin ibus laor eet. Curabitur maximus, orci at interdum fring illa, tortor magna auctor nunc, id auctor tortor nisl a est. Prae sent ultr icies accumsan magna. Al iquam posuere hendrerit felis, sed varius leo congue ac. Proin vulp utat electus at ullamcorper pulvinar, mi mi rhoncus lorem, a laoreet justo neque vel orci. Mauris in libero in urna vestibulum tincidunt id aliquam neque. Sed vitae sollicitudin est. Nullam fermentum neque lorem, in porttitor dolor rhoncus in. Praesent dapibus eros quis odio eleifend, et viverra neque mattis. Etiam vulputate velit vitae leo malesuada, a cursus orci feugiat. Praesent suscipit non urna at eleifend.
</p>
  <p><span class="shape gradient"></span>
Sed nec odio elit. Suspendisse pulvinar, nulla varius tempus feugiat, magna nulla feugiat neque, vel tempus nibh tellus nec metus. Vestibulum et velit eu ligula tincidunt vestibulum. Aenean urna est, ullamcorper ac tempus a, volutpat et lacus. Vestibulum at odio ac mi finibus laoreet. Curabitur maximus, orci at interdum fringilla, tortor magna auctor nunc, id auctor tortor nisl a est. Praesent ultricies accumsan magna. Aliquam posuere hendrerit felis, sed varius leo congue ac. Proin vulputate, lectus at ullamcorper pulvinar, mi mi rhoncus lorem, a laoreet justo neque vel orci. Mauris in libero in urna vestibulum tincidunt id aliquam neque. Sed vitae sollicitudin est. Nullam fermentum neque lorem, in porttitor dolor rhoncus in. Praesent dapibus eros quis odio eleifend, et viverra neque mattis. Etiam vulputate velit vitae leo malesuada, a cursus orci feugiat. Praesent suscipit non urna at eleifend.
</p>
</div>
            
          
!
            
              
.shape {
  background-color: darkred;
  width: 200px;
  height: 200px;
  float: left;
}

.circle {
    shape-outside: circle( 100px at 50% 50%);
    border-radius: 50%;
}
.ellipse {
    shape-outside: ellipse( 100px 140px at 50% 50%);
    height: 300px;
    border-radius: 50%;
}
.rectangle {
    shape-outside: inset( 20px 30px 50px 0);
}
.rounded-rectangle {
    shape-outside: inset( 10px 10px 10px 10px round 50px);
  border-radius: 50px;
}
.trapezoid {
       shape-outside: polygon(37px 9px, 157px 7px, 189px 131px, 7px 127px);
    background: transparent;
}
@supports (clip-path: polygon(37px 9px, 157px 7px, 189px 131px, 7px 127px)) {
  .trapezoid {
  clip-path: polygon(37px 9px, 157px 7px, 189px 131px, 7px 127px);
  background-color: darkred;
  }
}
.image {
       shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1804713/image-shape.png);
  height: 400px;
  width: 400px;
    float: right;
}
.gradient{
  background: linear-gradient(37deg, rgba(0,212,255,1) 0%, rgba(2,0,36,0) 100%);
    shape-outside: linear-gradient(37deg, rgba(0,212,255,1) 0%, rgba(2,0,36,0) 100%);
       shape-image-threshold: 0.5;
}






* { box-sizing: border-box; }
body {
  background-color: black;
}
#wrapper {
  width: 100%;
  max-width: 1000px;
  font-size: 1.5em;
  margin: auto;
  line-height: 1.25;
  color:#FFF;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console