https://github.com/awesomelistsio/awesome-codepen
A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers.
https://github.com/awesomelistsio/awesome-codepen
awesome awesome-list awesome-lists codepen css web-design web-development webdesign
Last synced: 11 months ago
JSON representation
A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers.
- Host: GitHub
- URL: https://github.com/awesomelistsio/awesome-codepen
- Owner: awesomelistsio
- Created: 2025-08-02T22:36:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-02T22:46:29.000Z (11 months ago)
- Last Synced: 2025-08-03T00:19:44.198Z (11 months ago)
- Topics: awesome, awesome-list, awesome-lists, codepen, css, web-design, web-development, webdesign
- Language: Python
- Homepage: https://awesome.himpfen.com/
- Size: 7.81 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- ultimate-awesome - awesome-codepen - A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers. (Other Lists / TeX Lists)
README
# Awesome CodePen [](https://github.com/awesomelistsio/awesome)
[](https://ko-fi.com/awesomelists) [](https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ) [](https://tinyurl.com/e8ymxdw3) [](https://x.com/ListsAwesome) [](https://www.facebook.com/awesomelists)
> 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".
## Contents
- [Official Resources](#official-resources)
- [Popular Pens](#popular-pens)
- [Collections](#collections)
- [CSS Art](#css-art)
- [JavaScript Experiments](#javascript-experiments)
- [UI Components](#ui-components)
- [Games & Interactions](#games--interactions)
- [Learning & Tutorials](#learning--tutorials)
- [CodePen Alternatives](#codepen-alternatives)
- [Related Awesome Lists](#related-awesome-lists)
## Official Resources
- [CodePen Home](https://codepen.io/) – The main platform to explore Pens and create your own.
- [CodePen Blog](https://blog.codepen.io/) – News, tutorials, and feature updates.
- [CodePen Challenges](https://codepen.io/challenges) – Weekly prompts to inspire creativity and learning.
- [CodePen PRO](https://codepen.io/pro) – Paid plan with asset hosting, private pens, and more.
## Popular Pens
- [Pure CSS Day and Night Toggle](https://codepen.io/t_afif/pen/OJzvxWe) – A creative toggle switch using only CSS.
- [CSS Only Landscape](https://codepen.io/ivorjetski/pen/RwpRJbq) – A fully responsive landscape made with CSS.
- [Animated Hamburger Menu](https://codepen.io/denic/pen/abEjrZN) – Simple and elegant hamburger menu animation.
- [Pikachu with CSS](https://codepen.io/ChrisDermody/pen/VWbJjB) – Pikachu rendered using only CSS.
- [CSS Globe](https://codepen.io/kevinpowell/pen/NWqddvV) – An animated rotating globe using CSS.
## Collections
- [Creative Buttons](https://codepen.io/collection/nQPBbY) – A collection of creative CSS buttons.
- [Form Styles](https://codepen.io/collection/XKpNbP) – Stylish form design examples.
- [3D CSS Effects](https://codepen.io/collection/XVgZMg) – Pens featuring 3D-style CSS effects.
- [SVG Animations](https://codepen.io/collection/DQvYpQ) – Examples of SVGs animated with CSS and JS.
## CSS Art
- [CSS Mona Lisa](https://codepen.io/jaysalvat/pen/vOeWZw) – Classic art reimagined in CSS.
- [Pure CSS Pokemon](https://codepen.io/collection/AXmWgN) – A collection of Pokémon characters rendered in CSS.
- [CSS Avatars](https://codepen.io/collection/DEGbMq) – Creative avatars and illustrations made with CSS.
## JavaScript Experiments
- [Particles.js](https://codepen.io/VincentGarreau/pen/pnlso) – A particle animation library in action.
- [Canvas Rain](https://codepen.io/jackrugile/pen/BQbqVz) – Simulated rainfall with HTML5 Canvas.
- [Web Audio API Visualizer](https://codepen.io/akm2/pen/rHIsa) – Audio frequency visualizer with Web Audio API.
## UI Components
- [Dropdown Menus](https://codepen.io/collection/nLXYpL) – CSS and JS dropdown menu designs.
- [Modal Dialogs](https://codepen.io/collection/XQvNmz) – Pens showcasing modals, overlays, and popups.
- [Toggle Switches](https://codepen.io/collection/nZpMbR) – Sleek toggle designs using HTML and CSS.
- [Sliders and Carousels](https://codepen.io/collection/XgkLKL) – Image sliders, carousels, and galleries.
## Games & Interactions
- [Tic Tac Toe](https://codepen.io/Alireza29675/pen/MWdzBxM) – A JavaScript-based game of tic tac toe.
- [Flappy Bird in JS](https://codepen.io/bionik/pen/xxpbKqG) – Flappy Bird clone made in JavaScript.
- [Memory Game](https://codepen.io/aaroniker/pen/ExaZQZP) – A memory card-flipping game using vanilla JS.
## Learning & Tutorials
- [CodePen Projects](https://blog.codepen.io/documentation/codepen-projects/) – Guide to multi-file projects on CodePen.
- [Learn CSS Animations](https://codepen.io/collection/nbBqgY) – Educational Pens on animation basics.
- [Grid & Flexbox](https://codepen.io/collection/AGJLaR) – Visual and interactive grid/flex examples.
## CodePen Alternatives
- [JSFiddle](https://jsfiddle.net/) – Online IDE for HTML, CSS, and JavaScript with real-time preview.
- [JSBin](https://jsbin.com/) – Web-based collaborative development platform.
- [StackBlitz](https://stackblitz.com/) – Powerful online editor for full-stack apps.
- [PlayCode](https://playcode.io/) – JavaScript playground with live preview and collaboration.
## Related Awesome Lists
- **[Awesome CSS](https://github.com/awesomelistsio/awesome-css)**
- **[Awesome Front-End Development](https://github.com/awesomelistsio/awesome-front-end-development)**
- **[Awesome HTML5](https://github.com/awesomelistsio/awesome-html5)**
- **[Awesome JavaScript](https://github.com/awesomelistsio/awesome-javascript)**
## Contribute
Contributions are welcome!
## License
[](http://creativecommons.org/licenses/by-sa/4.0/)