codepen.io
Open in
urlscan Pro
2606:4700::6811:e30
Public Scan
Submitted URL: http://1710373319370.caulaai2.com/8207c259-45dc-45ab-a399-1f32873edc21?n=2&t=1710373318752&l_next=ahr0chm6ly93d3cubgf0yw5vbgn1bwlu...
Effective URL: https://codepen.io/
Submission: On March 14 via api from US — Scanned from US
Effective URL: https://codepen.io/
Submission: On March 14 via api from US — Scanned from US
Form analysis
1 forms found in the DOM/search/pens?q=null/
<form aria-labelledby="search-title" data-test-id="search-form" class="" action="/search/pens?q=null/"><label class="SearchForm-module_searchInputWrap-VxSwZ">
<h1 id="search-title" class="screen-reader-text">Search</h1><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 For once, sharing is not caring. IONOS VPS provides guaranteed resources for your next project. ads via Carbon SEARCH Your WorkPensProjectsCollections 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 ExtensionBuild more accessible websites with the ultimate in-browser testing tool for front end dev teams. 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 CLEAN TOAST NOTIFICATIONS - CSS Josetxu Love008 Open in Editor TAILWIND - COUNTDOWN Chris Bolson Love0034 Open in Editor A PEN BY PAUL SLAYMAKER Paul Slaymaker Love3073 Open in Editor FECOLORMATRIX: INTERACTIVE ZERO/ SELECT CHANNELS Ana Tudor Love70126 Open in Editor CONIC/ANGULAR GRADIENT SPINNER Rogie Love0044 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 developers, designers, and testers. Easily test your website for accessibility with the ultimate tool for in-browser testing. Share bugs with teammates with one click. Get everybody on the same URL with screenshots, details, & bug-fix help to import into your issue tracker. 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":"US","device":"unknown_device","mobile":false,"name":"chrome","platform":"pc","version":"122"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; 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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzEwNDUyNDIxLCJpYXQiOjE3MTA0NDg4MjEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.qk9BbyDQANX8NM4A_6Gz72SO9u6ywrGnf4nB0iO_YO0VCDFr6s3nxUVBuUWin5AsiEzIiAYD2O4kDO60gLpvp_sAkIfFveSUNqH83uG2yfL6cdDJJ7LG09P_ptAvc8aaHRLy6ZVdnt8VpQWxIPe-E35pS0S5o_8cgeJF2KWByppQUEipbbixsUqp2d-uWeKIh6nM1mrNWxJIukrk9lVOYk7Dk5CXZ4w-1Zg6uIeBX7CLf2L5k6ukTe1MD5lFbgEDsUmXEm3p7wlMpiHYuA5s7QOnTILQN1jM6E-EJl3yAsf8GynqB0K55MH6WspaGsa9C6o6fE_ztu_RCZiBJwQBQg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}