CodePen.IO@CodePen

Build, test, and discover front-end code 💻 Support: codepen.io/support

 All remote team!
codepen.io
Joined March 2012
"glowy hover effect" by Ines codepen.io/inescodes/pen/Pox…
95
742
7,028
707,423
border-style: groove; codepen.io/PullJosh/pen/MdMp…
32
624
2,541
Hey look who's OFFICIALLY TRADEMARKED!
36
95
1,622
"Expanding flex cards" by Zed Dash codepen.io/z-/pen/OBPJKK
19
239
1,402
Good to know: you can animate `grid-template-columns` and `grid-template-rows` now. web.dev/web-platform-10-2022… (Ain't editable embeds nice?)
6
181
1,366
245,320
"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle codepen.io/argyleink/pen/Rwd…
8
136
1,190
80,322
"CSS Holographic Masks" by Christian Alder codepen.io/HejChristian/pen/…
11
100
1,220
42,350
"Card Beam Animation" by BL/S® Studio codepen.io/blacklead-studio/…
14
62
1,111
50,990
"Signature animation" by Kiran Patel codepen.io/kiranpate1/pen/Ex…
17
69
1,082
49,607
"Pure CSS Toggle Buttons | ON-OFF Switches" by Himalaya Singh codepen.io/himalayasingh/pen…
8
206
1,008
"3D Drag out menu with guitar" by Jamie Coulter codepen.io/jcoulterdesign/pe…
8
136
1,005
"CSS-only low-poly Earth Globe" by Joan Perals codepen.io/jperals/pen/ExYqw…
8
184
953
"Easy comparison slider" by Adam Argyle codepen.io/argyleink/pen/XWO…
8
143
968
109,015
💕 The Most Hearted of 2022! 🔟 "Animated BottomBar Experiment (CSS Transitions only)" by @chrisbautista codepen.io/chrisbautista/pen…
18
130
940
133,691
Why web components? One reason: it's super fast and easy to use pre-built components that offer great functionality and are easy to style. Like Swiper! codepen.io/chriscoyier/pen/Q…
4
155
943
126,706
Little trick! Browsers will suck the content of a file out to plop into a <textarea> when you drag-and-drop, so our editors support that too.
10
178
881
"Interactive Spooky Login Form" by Alvaro Montoro codepen.io/alvaromontoro/pen…
12
203
824
"Scroll with Light" by Gayane Gasparyan codepen.io/gayane-gasparyan/…
7
115
811
71,375
this is. not right. adultswim.com/etcetera/elast…
18
214
766
"Credit Card Payment Form" by Adam Quinlan codepen.io/quinlo/pen/YONMEa
8
174
764
"Glass Button" by Petr Knoll codepen.io/Petr-Knoll/pen/Qw…
8
60
795
47,611
"CSS-Only Walking Dog" by David Khourshid codepen.io/davidkpiano/pen/B…
11
139
728
Need to convert some Markdown to HTML quick? CodePen can do that.
10
154
711
We've been under DDoS attack for many days and have been trying to fight it as best we can. We're still in the process of trying different things. So very sorry for the downtime.
49
130
671
"Displacement Scroll" by Matthew Willox codepen.io/mwmwmw/pen/VgemeN
13
115
683
"Face Button" by Katherine Kato codepen.io/kathykato/pen/EzX…
10
118
669
Ever wish you could just drag and drop an existing front-end project onto CodePen and get to work? Now you can: blog.codepen.io/2017/03/20/c…
13
288
651
Jeeeez how the heck does THAT work? "CSS Neural Network (number detection)" by Bali Balo codepen.io/bali_balo/pen/gOq…
19
110
669
99,689
"Pure CSS Moustached Nanny" by Julia Muzafarova codepen.io/miocene/pen/mjLPV…
16
164
642
An incredible galaxy generator by Per Byhring. "Let there be light" codepen.io/perbyhring/pen/wG…
11
183
641
"[Three.js]shader_ripple_color_mod()" by masuwa codepen.io/ma_suwa/pen/NWePW…
3
55
649
74,762
"CSS Background Effect" by Osorina Irina buff.ly/3zufjMi
4
64
662
25,625
"Modern CSS only column hover" by Sten Hougaard codepen.io/netsi1964/pen/dya… (Also, isn't it amazing how you can chuck a checkbox anywhere in the DOM, then do like body:has(.checkbox:checked) and *do anything you want* to style the page based on if it's checked or not? Jeepers.)
3
99
635
77,625
"How Many Steps Does It Take To Get From Me To You?" by Jase codepen.io/jasesmith/pen/rZm…
2
138
617
Idea pop into your head? Need to get to the Pen Editor ASAP? Just type pen.new into URL bar and you'll shoot straight there!
20
137
610
"The Faces of Electric Outlets" by Jon Kantner codepen.io/jkantner/pen/eLMg…
11
169
599
"CSS Grid: Style Guide II" by Olivia Ng codepen.io/oliviale/pen/Gbmy…
3
86
602
<NumberFlow /> is a really classy element that is very easy to use! number-flow.barvian.me/
5
48
615
37,941
"Egg Toggle" by Chris Gannon codepen.io/chrisgannon/pen/o…
14
155
571
💕 The Most Hearted of 2022! 8️⃣ "Sidebar Interaction" by @aybukeceylan codepen.io/aybukeceylan/pen/…
5
72
567
119,932
"❍ Circular Animations Set N°1" by Filip Zrnzevic codepen.io/filipz/pen/KwwKRR…
6
48
584
26,476
"∞ Loader animation" by Aaron Iker codepen.io/aaroniker/pen/mZg…
6
66
548
"WebGL Fluid Simulation With Your Text" by Ksenia Kondrashova codepen.io/ksenia-k/pen/MWMO…
2
37
547
23,802
These "Random" color harmonies by David A. are 😍 codepen.io/meodai/pen/RerqjG
5
80
519
Command (Ctrl on PC) - D is such a nice little keyboard shortcut for selecting the next-appearing text that's the same as what you already have selected. Then type in all places at once!
8
106
508
"Tab Bar Animation" by Aaron Iker codepen.io/aaroniker/pen/KKb… (I was so prepared for the little border on the bottom to move, but not THAT.)
3
75
531
61,241
"3D glass weather icons" by Vincent Durand codepen.io/onediv/pen/MWQKgm…
4
45
501
"border-radius and shape-outside" by Shannon Moeller codepen.io/shannonmoeller/pe…
6
46
542
23,203
"Loaders" by Aaron Iker codepen.io/aaroniker/pen/omv…
3
84
487
"Animated SVG Avatar" by Darin S codepen.io/dsenneff/pen/QajV…
11
162
457
"Ocean current" by Thibaud Goiffon codepen.io/Gthibaud/pen/qMNY…
5
87
451
What CSS Grid is really for. codepen.io/johnnycopes/pen/y…
2
171
470
💕 The Most Hearted of 2022! 5️⃣ "Infinite Scroll Animation" by @yoavikadosh codepen.io/ykadosh/pen/KKezJ…
8
49
451
69,270
"3D CSS Kinetic Type Poster" by @petebarr codepen.io/petebarr/pen/OJPB…
3
75
450
"Five (awesome) UI concepts and their CodePen implementation." stories.uplabs.com/can-you-c…
154
436
"Fancy multiple select" by Aaron Iker codepen.io/aaroniker/pen/VGM…
4
90
421
No. 7 on the Top Pens of 2023 is "Responsive Image Carousel" by noirsociety codepen.io/noirsociety/pen/Z… No View Transitions here; it's just plain HTML, CSS, and JavaScript setting an active list item and letting transitions and animations apply.
4
66
432
27,116
"CSS LEGO Minifigure Maker" by Josh Bader codepen.io/joshbader/pen/MZM…
5
100
405
swiss in css :: swissincss.com/
2
151
417
"Snake highlight" by Mikael Ainalem codepen.io/ainalem/pen/EQXjO…
7
101
406
Zed Dash shows us there is a lot of emotion we can display with two circles and some cropping, movement, and rotation. codepen.io/z-/pen/wvBPvby
2
74
407
"Pure CSS Gritty" by Adam Kuhn codepen.io/cobra_winfrey/pen…
6
41
394
77,827
"Double Yin Yang Animation" by Alex Hail codepen.io/ahail/pen/bGGeGQV
1
66
404
"CSS-only Animated Lantern" by 7oot codepen.io/7oot/pen/byPKra
3
70
397
"Only CSS: Shooting Star" by Yusuke Nakaya codepen.io/YusukeNakaya/pen/…
2
68
388
"Animated Svg illustration with Anime.js" by Artem codepen.io/fitzsyke/pen/pKdY…
2
57
377
"Glass Button" by Petr Knoll codepen.io/Petr-Knoll/pen/Qw…
10
31
397
18,637
🆕 J U S T - R E L E A S E D 🆕 CodePen Projects our new web IDE, just for you. blog.codepen.io/2017/03/20/c…

CodePen Projects Is Here!

What is CodePen Projects? If you’re familiar with the term, you can think of it as an IDE (Integrated Development Environment) for building websites. Like all of CodePen, you use it right in …

blog.codepen.io
24
198
373
🥁 it's time for... THE MOST HEARTED OF 2018 💗💗💗 codepen.io/2018/popular/pens…
3
124
367
"UI Motion – Shipping Concept" by Nerdmanship ⚡️ codepen.io/nerdmanship/pen/v…
5
114
379
It's that time again! THE MOST HEARTED OF 2017 codepen.io/2017/popular/pens…
2
138
367
"HyperMorph 3000™" by Andreas Borgen codepen.io/Sphinxxxx/pen/pZQ…
4
89
358
Clevvvvvverrrr. `border-bottom` follows along input as you type: medium.freecodecamp.org/text…
2
89
355
"<pixel-canvas> Web Component" by Ryan Mulligan codepen.io/hexagoncircle/pen…
4
24
380
13,780
"3D Cards" by Mubanga codepen.io/mubangadv/pen/YzJ…
1
52
352
41,828
Finally. An accurate digital rendering of a CVS receipt. codepen.io/garrettbear/pen/J…

CVS Receipt

CVS is notorious for their receipts, so I decided to share my experience with a simple CodePen. With some quick and dirty HTML, CSS, and JavaScript -...

codepen.io
12
72
350
"Halloween Witch | Pure CSS" by Kara Luton codepen.io/karaluton/pen/yRV…
1
75
342
"Cool Spotlight Shadows" by Ryan Mulligan codepen.io/hexagoncircle/pen…
2
51
344
36,204
You Might Not Need JavaScript: youmightnotneedjs.com/

You Might Not Need JavaScript

Examples of common UI elements and interactions with HTML and CSS alone.

youmightnotneedjs.com
3
114
336
"Info Cards Concept" by Yancy Min codepen.io/yancy/pen/gBLLxz
2
51
337
"Checkbox Rocker Toggle Switch" by Marcus Connor codepen.io/marcusconnor/pen/…
8
73
324
"Hover Effect using CSS Variables" by Dronca Raul codepen.io/rauldronca/full/W…
4
60
328
Clever idea for multi-level nav for last weeks #CodePenChallenges from Natalie. codepen.io/CodeMeNatalie/pen…
8
53
329
"Disturbed Polka" by Vincent codepen.io/vinzdef/pen/QNbMv…
1
21
341
39,949
"Draw Random Underline (DrawSVG)" by Osmo codepen.io/osmosupply/pen/qE…
30
337
14,199
😮 "Stretch Scroll" by Nathan Taylor codepen.io/nathantaylor/full…
2
51
314
"☑️ CSS-only Todo List Checkbox Animation" by Shaw codepen.io/shshaw/pen/WXMdwE…
2
79
313
A look at Dilum Sanjaya's lovely Pen "Timed Cards Opening" codepen.io/dilums/pen/NWodZM…
5
50
318
36,124
"LIQUID CONTENT REVEAL" by Ksenia Kondrashova codepen.io/ksenia-k/pen/dyae… (So cool! In the video, I fork it and add "Knobs" to adjust some of the const values that make it all work, so they can be adjusted right from the preview itself.)
5
43
323
52,730
No. 2 on the Top Pens of 2023 is "3D Card Hover" from Gayane Gasparyan. It's such a *surprising* hover effect involving such beautiful art it's impossible not to like. codepen.io/gayane-gasparyan/…
3
49
317
21,073
"NightLight" by Paul ... is a wonderfully beautiful Pen — then I take the opportunity to look at the `<script type="importmap">` used, a cool web platform feature I see more and more. buff.ly/3SNeYvk
2
45
298
42,422
"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner codepen.io/simeydotme/pen/og…
1
19
327
21,668
"Full-Width Panel Expansion, CSS only" by Shaw codepen.io/shshaw/pen/pWwrmM…
3
71
297
Building a Morphing Hamburger Menu with CSS :: scotch.io/tutorials/building…
2
83
296
"Doom Scroll - Front End Conf 2024 Demo" by Adam Kuhn Just... wow. codepen.io/cobra_winfrey/pen…
13
65
306
57,314
"pointer position controls timeline progress" by Tom Miller codepen.io/creativeocean/pen…
22
309
10,558
We just released a big UI change to CodePen! Here’s what’s new ✨ blog.codepen.io/2018/12/06/c…
14
53
284
"Pure CSS Spiral Text Thingy" by carpe numidium codepen.io/carpenumidium/pen…
4
83
291
"Pure CSS content filter" by Sam Gordon codepen.io/samgordon/pen/jPq…
1
102
280
An incredible galaxy generator by Per Byhring. "Let there be light" codepen.io/perbyhring/pen/wG…
2
78
285