PickCodeCopy the element's outerHTML into the HTML panel and its rules into the CSS panel, add the font and fix image URLs. Or use a tool that builds the pen for you: PickCode opens the picked element in a new CodePen in one click.
Why put it in CodePen
A pen isolates the element from the rest of the site. You can change one value and see what it does, find out which rules really matter, and share a link with a teammate. It is also a fast check of whether a copy is complete: if it looks right in an empty pen, it will look right in your project.
The manual way
- Inspect the element and choose Copy > Copy outerHTML. Paste it into the HTML panel.
- Copy the rules for the element and its children from the Styles pane with Copy rule, and paste them into the CSS panel. Remember the inherited font and color from
body. - Load the font: in Pen Settings, CSS, add the font stylesheet URL, or paste an
@importat the top of the CSS. - Make image and icon URLs absolute. A path like
/img/hero.pngpoints at codepen.io once it is in a pen. - If the site uses Tailwind, add Tailwind to the pen instead of copying rules. In Pen Settings, JS, add the Tailwind browser build as an external script.
https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4Open any element in CodePen with PickCode
- Pick the element. Press Alt Shift C and select it.
- Choose the format. In the code panel, pick Tailwind, React or HTML + CSS for the pen.
- Open in CodePen. Click Open in CodePen. A new pen opens with the markup, styles, font link and, for Tailwind and React, the scripts needed to render it.
- Tweak and save. Edit freely, then save the pen to your CodePen account.
Creating a pen from code
CodePen has a prefill API: a form that POSTs a JSON data field to https://codepen.io/pen/define creates a new pen with that content. Tools and docs sites use it for "Edit on CodePen" buttons. It is handy if you build your own bookmarklet:
<form action="https://codepen.io/pen/define" method="POST" target="_blank">
<input type="hidden" name="data" value='{"title":"Card","html":"<div class=\"card\">Hi</div>","css":".card{padding:16px}"}'>
<button type="submit">Open in CodePen</button>
</form>CodePen's own blog walks through moving an element from a site into a pen with this kind of flow.
What to expect
The pen shows the element at whatever width the preview pane has, so responsive classes kick in differently than in a full window. Drag the divider or open the full page view to check breakpoints. Behavior powered by the site's JavaScript (sliders, menus) won't run, since only markup and styles come across.
Questions
Is Open in CodePen free?
The free plan includes 1 CodePen a day. Pro removes the limit. See pricing.
Does PickCode send my code to CodePen automatically?
Only when you click Open in CodePen. That sends the code you chose to codepen.io to create the pen. Nothing else leaves your browser.
Why do images not load in my pen?
Relative image paths point at codepen.io in a pen. Change them to the full URL or upload your own images.
Can I open a React component in CodePen?
Yes. Use the Babel preprocessor in the JS panel and import React from a CDN. PickCode sets this up for you when you pick the React format.