Chris Coyier
@chriscoyier.net
📤 18516
📥 852
📝 847
I do
@codepen.io
Plus, it gives your CSS a tasty sear.
add a skeleton here at some point
about 16 hours ago
0
13
3
reposted by
Chris Coyier
Philip Schiller
about 19 hours ago
Happy 🎂 🍎
www.apple.com
loading . . .
Apple
Commemorate Apple's 50th anniversary.
https://www.apple.com
0
62
5
Ughck I missed one
add a skeleton here at some point
about 18 hours ago
0
7
0
Just add a `screenshot.jpg` (or whatever format)
add a skeleton here at some point
1 day ago
0
12
0
reposted by
Chris Coyier
CSS-Tricks*
1 day ago
Rounding up recent things that are worth having on your radar: 💥 SVG favicons and color scheme (
@pawelgrzybek.com
) 💥 Help shape @mixin (
@lea.verou.me
) 💥 Anchor-interpolated morphing (
@chriscoyier.net
) 💥 corner-shape UI elements (
@utilitybend.com
) ...and more:
css-tricks.com/whats-import...
loading . . .
What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More | CSS-Tricks
Short n’ sweet but ever so neat, this issue covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.
https://css-tricks.com/whats-important-8/
0
20
4
reposted by
Chris Coyier
Zach Leatherman
2 days ago
It needs to be known that
@cloudfour.com
are some of the best folks in the business and now is your chance to learn first-hand:
cloudfour.com/thinks/more-...
loading . . .
More Projects Please
We’re actively seeking new UX design, UI design or hybrid creative/development challenges to solve.
https://cloudfour.com/thinks/more-projects-please/
1
4
4
Just as a reminder — all these cool fonts are available to use on
@codepen.io
as well.
add a skeleton here at some point
4 days ago
0
43
5
Ghostty has `background-opacity` why don't YooOOOuUUUuu have `background-opacity` CSS?
5 days ago
2
26
0
Hawai’i I'm just back from the United States 50th state, a staggering 2,500 miles from the mainland. For the next week or two, I'll pronounce it Ha-Vie-ee, like how it's pronounced in the native Hawaiian language. A language, by the way, that only a few thousand people speak natively, no doubt due…
loading . . .
Hawai’i
I'm just back from the United States 50th state, a staggering 2,500 miles from the mainland. For the next week or two, I'll pronounce it Ha-Vie-ee, like how it's pronounced in the native Hawaiian language. A language, by the way, that only a few thousand people speak natively, no doubt due to the 91 years (1896-1987) where there was "strict physical punishment"
https://chriscoyier.net/2026/03/27/hawaii/
6 days ago
0
13
0
There is "Real" Tailwind (v4) processing in the 2.0 editor. No more faking it. You can straight up look at the output and see what it's doing.
loading . . .
6 days ago
0
32
6
Thread and video in case you've feeling the "Oh no! CodePen is going to be different!" feels. 2.0 can be almost identical to Classic, only dipping into new features when you're ready.
add a skeleton here at some point
6 days ago
0
22
7
I liked the part where Ryan Gosling was like “Go long!!!” and the alien caught the ball at the back of the end zone and the coach was like phewfff that was one heck of a project and winked at the camera
8 days ago
2
15
0
reposted by
Chris Coyier
Ben Evans
14 days ago
To celebrate something-or-other, I created a retro CRT using only vanilla CSS! 📺
codepen.io/ivorjetski/p...
No images. No JavaScript. No SASS. Fully turn-off-and-on-able! Also a documentary about the making of it:
www.youtube.com/watch?v=wdNH...
@CodePen
#css
#cssart
#cssonly
#frontend
loading . . .
CodePen TV 📺 100% Pure CSS
📺📺📺📺📺📺📺📺📺📺📺📺📺📺 🚫 - 100% No Images ☕ - Definitely no JavaScript 🤖 - Absolutely no AI 😇 - Only the purest HTML and completely vanilla fresh CSS!! 📺...
https://codepen.io/ivorjetski/pen/qEaRjBw
9
78
31
You can take any 2.0 Pen:
codepen.io/editor/team/...
And deploy it:
tight-hill-cattle.codepen.app
Then map it to a subdomain*:
subscribe.shoptalkshow.com
Three-minute video on how here:
www.youtube.com/watch?v=nzeW...
And docs:
blog.codepen.io/docs/pens/de...
*apex domains coming soon.
loading . . .
Deploy a Pen to a Custom Subdomain
YouTube video by Chris Coyier
https://www.youtube.com/watch?v=nzeWgVJkp6k
14 days ago
7
69
15
You can just pluck one-off Web Awesome components to use as you please. See how easy:
loading . . .
15 days ago
1
59
19
Meets Style Sheets I've accepted an invitation to speak at Smashing's (Online) Conference Meets Style Sheets. It's free on Wednesday, May 6th. I named my talk In-N-Out Styling. Long time CSS evangelist Chris Coyier will talk about how you can style things on their way into view on a webpage, and…
loading . . .
Meets Style Sheets
I've accepted an invitation to speak at Smashing's (Online) Conference Meets Style Sheets. It's free on Wednesday, May 6th. I named my talk In-N-Out Styling. Long time CSS evangelist Chris Coyier will talk about how you can style things on their way into view on a webpage, and on their way out. Of course, with Chris being Chris, there will be plenty of things which are food for discussion, as well as plenty of practical take-aways as well.
https://chriscoyier.net/2026/03/18/meets-style-sheets/
15 days ago
2
21
7
reposted by
Chris Coyier
kottke.org
24 days ago
New web game that takes 2 min to play (and perhaps a lifetime to master?): Outsmart. “Five rounds, first to 3 wins. In each round, the higher bet wins. You have 100 total points, so bet wisely. Can you outsmart the machine?”
[labs.davidbauer.ch]
loading . . .
Outsmart – a game of strategy and deception
A strategic betting game where you try to outsmart the computer, maybe for the last time ever.
https://labs.davidbauer.ch/outsmart/
0
18
4
reposted by
Chris Coyier
Ross Wintle
17 days ago
I can’t remember which newsletter it was in but my whole family are now simultaneously playing this stupid thing and it’s simple and joyous!
100jumps.org/play/
loading . . .
100 Jumps
Hold to charge, release to jump. Land on 100 platforms to win — but one miss and it's over. How many attempts will it take you?
https://100jumps.org/play/
10
188
60
Couple of reasons to put a width (and height!) on images.
loading . . .
19 days ago
2
94
18
reposted by
Chris Coyier
Adam Chalmers
19 days ago
Yeah i love OpenClaw... Opening a Whiteclaw and drinking it!!!!!!!!
3
219
28
Kermit Roosevelt I was at a school function the other day where the 2nd graders performed a bunch of Aesop's Fabels and it was great. It was a double-header with 3rd graders who then read prepared reports on famous people. It was cross-disciplinary thing as the kids brought props from design…
loading . . .
Kermit Roosevelt
I was at a school function the other day where the 2nd graders performed a bunch of Aesop's Fabels and it was great. It was a double-header with 3rd graders who then read prepared reports on famous people. It was cross-disciplinary thing as the kids brought props from design class, costumes from performing arts, and did the speech both in Spanish and English.
https://chriscoyier.net/2026/03/14/kermit-roosevelt/
19 days ago
0
1
0
AI is my CMS I mean... it's not really, of course. I just thought such a thing would start to trickle out to people's minds as agentic workflows start to take hold. AI agents are already up in your codebase fingerbanging whole batches of files on command. What's the difference between a CMS taking…
loading . . .
AI is my CMS
I mean... it's not really, of course. I just thought such a thing would start to trickle out to people's minds as agentic workflows start to take hold. AI agents are already up in your codebase fingerbanging whole batches of files on command. What's the difference between a CMS taking some content and smashing it into some templates and an AI doing that same job instead?
https://chriscoyier.net/2026/03/13/ai-is-my-cms/
20 days ago
4
10
0
Fellow olds, I’m like 90% sure “cooking” is good and “cooked” is bad.
21 days ago
18
98
2
reposted by
Chris Coyier
Shaw
21 days ago
The
@codepen.io
Compiler is the real key to making 2.0 so awesome. Because of how smart it is, using Tailwind is as simple as `@import "tailwindcss"`, and using most JS Libraries is as simple as `import gsap from "gsap"`! No additional work required on your part.
codepen.io/editor/shsha...
add a skeleton here at some point
1
11
3
The CodePen 2.0 editor has a whole new brain: The CodePen Compiler. It looks at all your code, figures out what needs to be done, makes a plan, and executes it. It does a lot very quickly. (Go, naturally). Here's a page that goes into some of it:
codepen.io/beta/compiler
loading . . .
The CodePen Compiler
The CodePen Compiler powers 2.0 editor: process and build your code with configurable blocks.
https://codepen.io/beta/compiler
21 days ago
5
62
16
reposted by
Chris Coyier
Patrick Brosset
22 days ago
Curious about custom <select>? I wrote about some of my recent demos over at
@css-tricks.com
! Take a look ✨
css-tricks.com/abusing-cust...
0
80
22
Enjoyed Bugonia. Little bit like a high budget Safety Not Guaranteed.
22 days ago
3
9
0
The way our
@codepen.io
2.0 editor deals with npm packages is pretty cool. 1. Detect package usage 2. Create/edit `package.json` file to reflect needed packages 3. Inject an `<script type="importmap">` into any HTML produced by compiler Here's using React in 53 seconds.
loading . . .
22 days ago
1
46
6
Lol I JUST finally bailed on Ghostty because of lack of search when they drop the feature.
ghostty.org/docs/install...
23 days ago
2
16
1
I’d like to see an explicitly social-forward RSS reader. Like it’s encouraged to highlight passages and leave short comments. Your buds see yours, you see your buds.
23 days ago
13
104
8
reposted by
Chris Coyier
Nic Chan
23 days ago
Yes, person at Cursor did it, and Sanity rebutted it
leerob.com/agents
www.sanity.io/blog/you-sho...
loading . . .
Coding Agents & Complexity Budgets
$260 in tokens and hundreds of coding agents later.
https://leerob.com/agents
3
23
3
Has someone written "AI is my CMS" yet? Feels inevitable. Like why run a build tool when you can just prompt another page?
23 days ago
7
14
0
One day you're like "we should send a weekly newsletter about the cool stuff on
@codepen.io
and around". Then 500 weeks go by. 🎉
codepen.io/spark/500
24 days ago
3
58
7
“Sometimes” is a such a weak lyrical crutch. Just say the feeling. It’s not “when the moon hits your eye like a big pizza pie it’s sometimes amore” It’s friggin amore let’s go
25 days ago
6
73
3
behold this Pinewood Derby car that *is* a Pinewood Derby.
26 days ago
5
140
13
Mad CSS Round One of Mad CSS is out on YouTube!
loading . . .
Mad CSS
Round One of Mad CSS is out on YouTube!
https://chriscoyier.net/2026/03/06/mad-css/
27 days ago
1
25
0
Untitled Lars Mensel: ... the only way out of the delusion that AI can replace all of us is to do good meaningful work, and to appreciate good work when we see it.
loading . . .
Untitled
Lars Mensel: ... the only way out of the delusion that AI can replace all of us is to do good meaningful work, and to appreciate good work when we see it.
https://chriscoyier.net/2026/03/06/13293/
27 days ago
1
21
0
Chrome: • Split view? Yes please. • Side tabs? Yes please. • ⌘-Shift-C to copy URL? Yes please. Easily the top three features I need from Arc. (Option-click for split view would be nice, tab spaces would be nice. Side tabs is a feature flag for now.)
loading . . .
27 days ago
5
23
3
Design trend noted by Steve McKinney: "pages in pages"
iamsteve.me/notes/pages-...
27 days ago
2
10
0
A few min on <geolocation> in HTML/CSS/JS. 1. I like how explicit it is for users & how it helps "recover" from incorrect permissions. 2. It's *super interesting* how it checks the contrast accessibility and just makes the button not work if you dink it up.
www.youtube.com/watch?v=hffX...
loading . . .
A Bit on the [geolocation] Element
YouTube video by CodePen
https://www.youtube.com/watch?v=hffXUYIrGMk
28 days ago
3
37
6
reposted by
Chris Coyier
Kevin Powell
28 days ago
Did you build your bracket yet?
add a skeleton here at some point
2
12
2
The one-off font for the Neo page is just a `mask-image`, but you can still select the text. Maybe might as well make it size along with the container?
loading . . .
29 days ago
0
49
7
and nobody cares how that sick ass `corner-shape: scoop;` smurfs right into that `border-radius` like they were born together? cmon
add a skeleton here at some point
29 days ago
3
27
0
team i'm FIRED UP about these gnarly gotchas with Anchor Positioning in CSS.
loading . . .
about 1 month ago
4
68
12
this is hilarious. You SAID we could style <select> now DAD.
add a skeleton here at some point
about 1 month ago
0
54
5
Untitled I like how Nolan paints this two-sided picture of AI coding. The worst fact about these tools is that they work. They can write code better than you or I can, and if you don’t believe me, wait six months. You could abstain out of moral principle. And that’s fine, especially if you’re at…
loading . . .
Untitled
I like how Nolan paints this two-sided picture of AI coding. The worst fact about these tools is that they work. They can write code better than you or I can, and if you don’t believe me, wait six months. You could abstain out of moral principle. And that’s fine, especially if you’re at the tail end of your career.
https://chriscoyier.net/2026/03/02/13264/
about 1 month ago
5
30
6
Tucci Pan Review Stanley Tucci has a set of cookware named after him that GreenPan sells. I've got these two pans: I forget where they came from exactly, some silent auction or something, but I unboxed and started using them about 8 months ago. I was so hyped the first few months! Ultra extremely…
loading . . .
Tucci Pan Review
Stanley Tucci has a set of cookware named after him that GreenPan sells. I've got these two pans: I forget where they came from exactly, some silent auction or something, but I unboxed and started using them about 8 months ago. I was so hyped the first few months! Ultra extremely non-stick Washing them with a soft sponge is nearly effortless because of how non-stick they are.
https://chriscoyier.net/2026/02/25/tucci-pan-review/
about 1 month ago
5
7
0
You Get Good At What You Do (Or Do You?) I used to feel really strongly about this. You get good at what you do. Like, if you build websites all the time, you get good at building websites. If you make burritos all the time, you get good at making burritos. It could extend to almost anything.…
loading . . .
You Get Good At What You Do (Or Do You?)
I used to feel really strongly about this. You get good at what you do. Like, if you build websites all the time, you get good at building websites. If you make burritos all the time, you get good at making burritos. It could extend to almost anything. Healthy places that fit into the logical narrative you already know, like if you lift weights to the point of exhausting your limits a lot, you'll get stronger.
https://chriscoyier.net/2026/02/24/you-get-good-at-what-you-do-or-do-you/
about 1 month ago
7
16
5
reposted by
Chris Coyier
Igalia
about 1 month ago
Our colleague and
@tc39.es
co-chair
@ryzokuken.dev
was at the
@shoptalkshow.com
last week with
davatron5000.bsky.social
and
@chriscoyier.net
chatting about web standards, JavaScript, TC39 and how it works! Listen in here:
shoptalkshow.com/703/
loading . . .
703: Ujjwal Sharma and TC39
We’re joined by Ujjwal Sharma to talk about what the TC39 is, who’s in it, and how the TC39 group guides JavaScript.
https://shoptalkshow.com/703/
0
15
7
I really agree with myself here.
add a skeleton here at some point
about 1 month ago
5
82
1
Load more
feeds!
log in