CodePen.IO
@CodePen
Followers
198,337
Following
2,654
Media
1,733
Statuses
20,331
Build, test, and discover front-end code 💻 Support:
All remote team!
Joined March 2012
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
#Eurovision2024
• 1443880 Tweets
América
• 499930 Tweets
#母の日
• 178533 Tweets
#MothersDay
• 79192 Tweets
ヴィクトリアマイル
• 69792 Tweets
ストフェス
• 34224 Tweets
Pachuca
• 33408 Tweets
Tatum
• 32866 Tweets
Barco
• 31953 Tweets
カーネーション
• 31647 Tweets
Chivas
• 29422 Tweets
Newwiee Honey Teerak🩷
• 27193 Tweets
Roger Corman
• 24228 Tweets
Saint MSG Insan
• 24216 Tweets
Igor
• 24081 Tweets
カグヤ様
• 20636 Tweets
ティアキン
• 16434 Tweets
Garland
• 16287 Tweets
ナミュール
• 15785 Tweets
Buckley
• 11944 Tweets
Derrick Lewis
• 11770 Tweets
Toluca
• 11740 Tweets
Hannibal Lecter
• 10997 Tweets
Good to know: you can animate `grid-template-columns` and `grid-template-rows` now.
(Ain't editable embeds nice?)
7
194
1K
💕 The Most Hearted of 2022!
🔟 "Animated BottomBar Experiment (CSS Transitions only)" by
@chrisbautista
19
138
992
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!
4
168
990
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.
11
191
951
Need to convert some Markdown to HTML quick? CodePen can do that.
11
175
763
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.
58
147
739
Ever wish you could just drag and drop an existing front-end project onto CodePen and get to work?
Now you can:
17
326
714
Jeeeez how the heck does THAT work?
"CSS Neural Network (number detection)" by Bali Balo
23
123
711
An incredible galaxy generator by Per Byhring.
"Let there be light"
12
198
685
"Modern CSS only column hover" by Sten Hougaard
(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.)
4
111
682
Idea pop into your head? Need to get to the Pen Editor ASAP?
Just type into URL bar and you'll shoot straight there!
21
153
668
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!
9
119
555
"Tab Bar Animation" by Aaron Iker
(I was so prepared for the little border on the bottom to move, but not THAT.)
4
83
565
"Five (awesome) UI concepts and their CodePen implementation."
0
169
479
No. 7 on the Top Pens of 2023 is "Responsive Image Carousel" by noirsociety
No View Transitions here; it's just plain HTML, CSS, and JavaScript setting an active list item and letting transitions and animations apply.
5
73
470
Zed Dash shows us there is a lot of emotion we can display with two circles and some cropping, movement, and rotation.
3
82
441
🆕 J U S T - R E L E A S E D 🆕
CodePen Projects our new web IDE, just for you.
26
228
408
Clevvvvvverrrr. `border-bottom` follows along input as you type:
2
99
384
Finally. An accurate digital rendering of a CVS receipt.
13
82
383
You Might Not Need JavaScript:
6
127
370
"LIQUID CONTENT REVEAL" by Ksenia Kondrashova
(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
46
333
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.
3
52
337
"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.
3
49
326
We just released a big UI change to CodePen!
Here’s what’s new ✨
21
61
317
An incredible galaxy generator by Per Byhring.
"Let there be light"
2
89
307
"Doom Scroll - Front End Conf 2024 Demo" by Adam Kuhn
Just... wow.
13
69
322
"FlexBox Animation move elements when one is removed" by Maurici Abad
1
66
308
No. 9 is "Blend-Mode Sticky Nav & Hero" by Jalin Burton
A lovely landing page design where the text and logo remains readable because of the blending being used. When readability is threatened, it doesn't take long to come back. Tension!
0
46
288
Skew! Then Unskew! For a cool shape.
"Image masking with pure CSS (transform and overflow)" by Nooray Yemon
0
35
283