Embedded Pens
CodePen Blog

Bring your creations on CodePen to documentation, blog posts, or any other site!

You can embed Pens on other websites with our copy-and-paste Embed code. To get the code, click the "Embed" button in the footer of the Editor on any Pen. Or, select "Embed Pen" from the export menu.

build a site for free

The Embed Builder helps you customize your embed. You can:

Choose your embed theme: We have two built-in themes: Light and Dark. Every CodePen also gets a customizable, personal default theme. PRO members get unlimited embed themes.

Choose which tabs to display: the embed builder will start out with your result tab and one of your code tabs selected. You can choose a different code tab, turn off the code tabs entirely to maximize the result, or hide the result and maximize a code tab.

Make the preview "Click-to-Load": Check the checkbox next to "use click-to-load" to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a "Run Pen" button. When your visitors click the button, the Pen will load.

See the Pen National Geographic style "cover" image by casper392945 (@casper392945) on CodePen.

Make the embed editable: PRO members can make their embeds editable, just like the editor on CodePen. You can read more about how editable embeds work in our PRO Embeds documentation.

Set the embed height: Drag the bar at the bottom of the embed to change its height. The Copy & Paste code will update with the new height.

After you've finished customizing the embed code, copy the code from the "Copy & Paste Code" box below the embed preview. Paste the code into your website and your embed will appear.

See the Pen National Geographic style "cover" image by Sherri Alexander (@SherriAlexander) on CodePen.

Documentation: Embedded Pens

See the Pen Codevember#8 : Kitty Kitty by casper392945 (@casper392945) on CodePen.

See the Pen Portfolio Items CSS3 transitions effects by casper392945 (@casper392945) on CodePen.

See the Pen Isometric eCommerce CSSGrid by casper392945 (@casper392945) on CodePen.

© Copyright 2018 Igor Kapustin - All Rights Reserved