A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers.
CodePen is a popular online code editor and social development platform for front-end designers and developers to showcase user-created HTML, CSS, and JavaScript code snippets, known as "Pens".
- Official Resources
- Popular Pens
- Collections
- CSS Art
- JavaScript Experiments
- UI Components
- Games & Interactions
- Learning & Tutorials
- CodePen Alternatives
- Related Awesome Lists
- CodePen Home – The main platform to explore Pens and create your own.
- CodePen Blog – News, tutorials, and feature updates.
- CodePen Challenges – Weekly prompts to inspire creativity and learning.
- CodePen PRO – Paid plan with asset hosting, private pens, and more.
- Pure CSS Day and Night Toggle – A creative toggle switch using only CSS.
- CSS Only Landscape – A fully responsive landscape made with CSS.
- Animated Hamburger Menu – Simple and elegant hamburger menu animation.
- Pikachu with CSS – Pikachu rendered using only CSS.
- CSS Globe – An animated rotating globe using CSS.
- Creative Buttons – A collection of creative CSS buttons.
- Form Styles – Stylish form design examples.
- 3D CSS Effects – Pens featuring 3D-style CSS effects.
- SVG Animations – Examples of SVGs animated with CSS and JS.
- CSS Mona Lisa – Classic art reimagined in CSS.
- Pure CSS Pokemon – A collection of Pokémon characters rendered in CSS.
- CSS Avatars – Creative avatars and illustrations made with CSS.
- Particles.js – A particle animation library in action.
- Canvas Rain – Simulated rainfall with HTML5 Canvas.
- Web Audio API Visualizer – Audio frequency visualizer with Web Audio API.
- Dropdown Menus – CSS and JS dropdown menu designs.
- Modal Dialogs – Pens showcasing modals, overlays, and popups.
- Toggle Switches – Sleek toggle designs using HTML and CSS.
- Sliders and Carousels – Image sliders, carousels, and galleries.
- Tic Tac Toe – A JavaScript-based game of tic tac toe.
- Flappy Bird in JS – Flappy Bird clone made in JavaScript.
- Memory Game – A memory card-flipping game using vanilla JS.
- CodePen Projects – Guide to multi-file projects on CodePen.
- Learn CSS Animations – Educational Pens on animation basics.
- Grid & Flexbox – Visual and interactive grid/flex examples.
- JSFiddle – Online IDE for HTML, CSS, and JavaScript with real-time preview.
- JSBin – Web-based collaborative development platform.
- StackBlitz – Powerful online editor for full-stack apps.
- PlayCode – JavaScript playground with live preview and collaboration.
Contributions are welcome. Please ensure your submission fully follows the requirements outlined in CONTRIBUTING.md, including formatting, scope alignment, and category placement.
Pull requests that do not adhere to the contribution guidelines may be closed.
