codepen.io Open in urlscan Pro
104.18.111.164  Public Scan

Form analysis
1 forms found in the DOM

/search/pens?q=null/

<form aria-labelledby="search-title" data-test-id="search-form" class="SearchForm-module_searchForm-eYDFL" action="/search/pens?q=null/"><label class="SearchForm-module_searchInputWrap-VxSwZ"><span id="search-title"
      class="ScreenReaderText-module_root-jASUi">Search</span><svg viewBox="0 0 56.7 56.7" class="SearchForm-module_iconMag-09rf5">
      <path
        d="M42.8 7.3C33-2.4 17.1-2.4 7.3 7.3c-9.8 9.8-9.8 25.7 0 35.5 8.7 8.7 22.2 9.7 32 2.9l9.6 9.6c1.8 1.8 4.7 1.8 6.4 0 1.8-1.8 1.8-4.7 0-6.4l-9.6-9.6c6.8-9.8 5.8-23.3-2.9-32zm-6.2 29.3c-6.4 6.4-16.7 6.4-23.1 0s-6.4-16.7 0-23.1c6.4-6.4 16.7-6.4 23.1 0 6.4 6.4 6.4 16.8 0 23.1z">
      </path>
    </svg><input autocomplete="off" class="SearchForm-module_searchInput-cYc5R" data-test-id="search-input" name="q" placeholder="Search CodePen..." type="search" value=""></label></form>

Text Content

CodePen HomeCodePen Home

Navigation Menu Toggle


Navigation Menu Toggle


TRY OUR ONLINE EDITOR

Start Coding
Search PensChallengesSpark
CodePen
Manage your projects easier, collaborate smarter, and accomplish more with one
platform. Try it free ads via Carbon

Search
PensProjectsCollections
Sign UpLog In
HTML
<div class="rect"></div>
SCSS

.rect {


background: linear-gradient(


-119deg,


$gray 0%,


$dark-gray 100%); }

JS
var colors = ["#74B087","#DE7300","#74B087"];


function animate() {};


THE BEST PLACE TO BUILD, TEST, AND DISCOVER FRONT-END CODE.

CodePen is a social development environment for front-end designers and
developers. Build and deploy a website, show off your work, build test cases to
learn and debug, and find inspiration.

Sign Up for Free
axe DevTools ExtensionEasily find & fix your web accessibility issues. Built for
front-end dev teams–no training required.
Sponsor


BUILD & TEST

Get work done quicker by building out entire projects or isolating code to test
features and animations. Want to keep it all under wraps? Upgrade to a PRO
account to keep your work private.

Try the Editor


LEARN & DISCOVER

Want to upgrade your skills and get noticed? Participating in CodePen Challenges
is a great way to try something new. We frequently feature these Pens on our
homepage and across social media!

Join this Week’s Challenge


SHARE YOUR WORK

Become a part of the most active front-end community in the world by sharing
work. Presenting at a conference? Show your code directly in the browser with
Presentation Mode.

Explore Trending


FIND INSPIRATION FROM 1.8 MILLION+ FRONT-END DESIGNERS AND DEVELOPERS.

Browse and share work from world-class designers and developers in the front-end
community.


Open in Editor


[TAILWIND] MEGA MENU (CSS ONLY)

Chris Bolson
Love180268

Open in Editor


IMPOSSIBLE MAZE 🌽 (897 BYTES) #PETITEPATTERNS

Bence Szabo
Love10166

Open in Editor


STEP INDICATOR

Jon Kantner
Love120285

Open in Editor


WINDOWS XP

Matthias Hurrle
Love102193

Open in Editor


CSS IMAGE GALLERY SIDE SCROLL

Christian Thorvik
Love111471
Next


A FRONT-END ENVIRONMENT MADE FOR TESTING AND SHARING

Explore the Editor
 * Support For the Way You Code
   
   The CodePen Editor is highly customizable. There is autocomplete and Emmet
   for speed and accuracy. Plus you can set up smart defaults for starting new
   work.

 * Keep Your Pens Private
   
   Nobody can see your private stuff until you want them to, because they are at
   secret unguessable, non-searchable, non-indexable URLs.

 * Embed Pens
   
   Completely customize the look of code demos on your own site. Change the look
   of your site? Just change the theme and all your Embedded Pens change too.

 * Asset Hosting
   
   Need to use an image in a Pen? No more awkwardly finding alternate hosting
   for it, you can drag-and-drop it right onto CodePen and we'll host it for
   you. And not just images! CSS, JSON files, SVGs, media files, whatever!

 * Build Entire Projects
   
   Projects is the most powerful feature of CodePen. It's a full blown IDE right
   in the browser, with automatic preprocessing, drag and drop uploading, live
   previews, website deployment, and much more.

 * Collab ModeLive collaboration on code. Multiple people can type and edit code
   in a Pen at the same time, all while still seeing the live preview.

 * 
 * 
 * 
 * 
 * 
 * 


GET STARTED QUICKER

Get inspiration from Pens using frameworks, libraries, and design patterns.
Then, start your own with premade templates.

Explore Topics


REACT


VUE


TAILWIND


SASS


GSAP


AXE DEVTOOLS EXTENSION

Join over 400k front-end dev team users and try the ultimate in-browser
accessibility testing tool. Start testing in just minutes & easily find
issues–no accessiblity training required. Share a dedicated URL with your team
that includes screenshots, details, & instructions on how to fix your issues.

Get Started for Free


BRING THE WHOLE TEAM

Each team and team member gets all the features of a PRO membership. That means
the Team can do things like upload Assets, use features like Collab Mode,
Professor Mode, Presentation Mode, and Live View, and apply custom CSS to Posts,
Profiles, and Embeds.

Start a Team


LOVED BY HUNDREDS OF TEAMS, INCLUDING:



CODEPEN

AboutBlogPodcastDocumentationSupportAdvertise

FOR

TeamsEducationPrivacyEmbedsAsset Hosting

SOCIAL

YouTube𝕏InstagramMastodon

COMMUNITY

SparkChallengesTopicsCode of Conduct
CodePen HomeCodePen Home

©2024 CodePen

Demo or it didn't happen.

Terms of Service · Privacy Policy


CodePen doesn't work very well without JavaScript.

We're all for progressive enhancement, but CodePen is a bit unique in that it's
all about writing and showing front end code, including JavaScript. It's
required to use most of the features of CodePen.

Need to know how to enable it? Go here.

Close this, use anyway.
{"__browser":{"country":"DE","device":"unknown_device","mobile":false,"name":"chrome","platform":"pc","version":"126"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer
*; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *;
gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *;
web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-forms
allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts
allow-top-navigation-by-user-activation allow-downloads
allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain
Anonymous","title":"Captain
Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain
Anonymous","name":"Captain
Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain
Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzE4MjY1MjI5LCJpYXQiOjE3MTgyNjE2MjksImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.6jbPw_jZbYclGqcddr50irrRyZaClrcyouXhV9FL37pSicgfijRyn2Ew4_t-p5PfAh9Khl-gKaB2XoW9g-teRVfc-ZexGBCYGLMDccpNjThj8VKB8O3rAGFNNCSDvl9m_9k7TM85rYTWIJ1DFjPncqp3lgvNHPc0iE7WvMFMKyjqgLWOUazQXe21t04To7S1YmU75OI0Oxuyc4H9SMb5TuHBgtcLcL4ZN1WBGhGLu7v6u3bQ7rmcoF3SQJ7zYfCqF3agDGrkXJb81zPPLjJz5h7P5oD04ZqnglURrvkmV0waZALXvimCw-JRKH2gr-ilDR9UdIHFrrbn4xtdxgFmHA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}