CO

CodePen Embed

By CodePen

9.6/ 10

Show off live front-end code demos with HTML, CSS, and JS. Viewers can edit the code directly.

developercodepenhtmlcssjavascript
💻

Developer Tools

Code editors, sandboxes, and developer utilities.

Browse category

Parameters

PEN_USERrequired

CodePen author username

Default: css-tricks

PEN_SLUGrequired

Pen hash/slug from URL

Default: YzLNNez

Embed Code

Customize:
html
<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="PEN_SLUG" data-user="PEN_USER" style="height:400px;">
  <span>See the Pen on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Live Preview