Your CodePen profile page is where you can showcase your favorite work and tell the world a little bit about yourself. You can add or change profile information in your account’s Profile Settings.

Keep in mind that your CodePen profile page is public. Your profile can be seen by anyone who visits CodePen and may be indexed by search engines. Anything you add to your profile must comply with our Code of Conduct and Terms of Service.

Profile Image

Click “Choose File” next to your current avatar image to upload a new one from your device. Ideal avatar dimensions are 500px x 500px. Maximum file size is 5mb.

About You

Everything here is optional. You can add or remove your display name, location, and a brief bio in this section.

Profile Links

You can add up to three links to your profile.

Custom Header

CodePen PRO members can use a Pen as the header for their profile page. The Pen will appear behind your user avatar by default. Just drop in the link to the Pen of your choice and you’ll see it on your profile page.

Custom CSS

If you want to get really creative with your CodePen profile page, you can use the CSS from one of your Pens to customize it. Make sure the Pen has CSS in the CSS panel, then paste the URL for the Pen into the Custom CSS “Pen URL” field.

Organize Showcase

Your CodePen profile features seven Pens. By default it’s your 7 most recent Pens. You can add, remove, or rearrange Pens in your showcase by clicking the “Organize Showcase” button. On the Organize page, drag and drop Pens from the left to the profile preview. You can search your Pens, or page through your Pens using the “Next” button below the Pen list.