UPDATE: This little trick doesn’t work anymore because of a security precaution we put in place preventing some URL’s on CodePen from being <iframe>d. It’s possible we could maybe make it work again, so if you really care, let us know. You can still customize profiles with Custom CSS and Custom Pens, it’s just the trick in this blog post that doesn’t work.

Any CodePen user can apply custom CSS to their profile. You put the URL to a Pen under Settings > Customize.

CodePen will recognize that, process the CSS if there if necessary, and apply it to your profile. If you’re PRO, you can also make any Pen the header of your profile, which is an extra-fun touch.

Here’s a little trick to making playing around with customizing your profile a lot easier.

1) Put an <iframe> of your own profile in that Pen

In the very same Pen you’re linking up as the custom CSS, put this iframe there:

<iframe src="http://codepen.io/you/" frameborder="0" id="this-iframe-only" scrolling="yes"></iframe>

Only the CSS from that Pen matters, so this iframe is just to help us preview what we’re doing.

2) Make sure the iframe fills the preview

Again, just to help us see what we’re doing. This CSS won’t affect your profile, as it’s either styling something that isn’t there or is a style already in use there:

* {
  box-sizing: border-box;
html, body, #this-iframe-only {
  height: 100%;
  width: 100%;
  border: 0;

If you really need some CSS inside the Pen preview, but that you don’t want to apply to your actual profile, you can inject it via JavaScript, as any JavaScript on this Pen will also not apply to your profile.

3) Turn off Autorefreshing

We need a full refresh after each change so that the saved changes and make their way through the system and apply to the iframed profile. Turn off the checkbox at Settings > Behavior > Auto-Updating Preview and you’ll get a Run button in the header.

4) Inspect for the ID’s of things you want to change

We’ve applied IDs to most HTML elements on your profile, specifically to help as high-specificity styling hooks.

Here’s an example where I find the ID of my name as #profile-name-header, then write some CSS to style that element.

5) Remember you’re DOIN’ IT LIVE

If anything goes horribly wrong, remember you can just remove the Custom CSS and go back to normal.

If you’re more into the idea of a local development environment to customize your profile, and then pushing up the CSS only when you’re finished tweaking, Jhey Tompkins has made a thing called crayon you can check out.

This repo reduces the burden by allowing you to work with a local and generic version of a CodePen profile page. You’re able to review your developed styling and get visual feedback in the browser with live reload goodness 😄 Once you’re done, you can deploy the styling changes to CodePen from the command line using an automated “POST to Prefill Editors” setup.