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!
