You know how sometimes people tell you that you're just not able to pull something off? Well, that's exactly what got me thinking about all this. I wanted to see if it was possible to cook up something really nice-looking using only 100 bytes of CSS.
I mean, 100 bytes? That's barely enough to write hello world! Yet, I just couldn't shake the idea. It was like a puzzle I had to solve. Could it really be done?
So, being the curious type, I went ahead and built a little playground to see.
The Challenge: Small Size
OK, so here's the deal. You start with an empty CSS file. Sounds basic, right? Wrong! You only get 100 bytes to type in. Not lines, bytes! Every key press counts. It changes the way you think about coding. All of a sudden, shortening becomes not just about neatness, but about survival. Something like background-color turns into just background to save space. You look at every single character and consider if it's worthy of being there.
It makes you think and come up with ways around problems. And you know what? I was surprised with the results.
So, I built a CSS Masterpiece Maker
After playing around with these tiny CSS snippets myself, I thought, there must be others that like it as well. So I put together a tool called CSS Masterpiece in 100 Bytes.
Learn more about CSS Art: CSS Art Challenge: Create Amazing Art in 100 Bytes
Here's how it all goes down:
- You type in your CSS code.
- You get to see what it looks like right away.
- The tool counts the bytes for you, as you work.
- You can send what you create using a simple link.
No logins, no headaches. Just you, your CSS code, and the 100-byte limit.
Here are the awesome bits
Live Updates: Type, and see the change instantly. Writing background: red and seeing a red square pop up? Feels great!
No Work Lost: Everything's autosaved. You can come back later, and your masterpiece is still there.
Remixing: There are some examples I put up to start you off, each with a Remix button. Feeling uninspired? Remixing someone else's idea can help a lot.
Random spark: With the Get Inspired! button, a random CSS bit appears. It can give you an idea you wouldn't have thought of otherwise.
Share: Everything you make has its own link that you can send and share with people directly!
Why check this out? (More Than a Game)
Look, writing all your website CSS in 100 bytes isn't for the real world. But having fun with this limit can show you some useful tricks:
CSS Shorthand: Things like background can be written in a shorter form.
New ways of styling: You will try out styles that you might not have thought of.
Clean Code: You will be cautious with every byte.
Good effects: You will learn a lot of visual effects with a small bit of code.
For more detailed guidance, check out: CSS Art Challenge: Create Amazing Art in 100 Bytes
It's a puzzle that makes you a better CSS coder.
Some of the things that people have made
Check these out:
- A golden circle (28 bytes:
border-radius:50%;background:gold;) - Blue-purple fade (44 bytes:
background:linear-gradient(135deg,#abd,#39f);) - Ring designs (67 bytes:
background:#fff;box-shadow:0 0 0 7px #fa0,0 0 0 15px #28e;border-radius:50%;) - Dashed borders with yellow (38 bytes:
border:8px dashed #fc3;background:#fffcbb;) - Glow text with shadows (55 bytes:
background:#222;color:#fff;text-shadow:1px 1px 3px #0cf;) - Circle that looks neat (32 bytes:
background:#333;border-radius:100% 0 100% 0;)
Like actual art, all with so little code!
A Competition
I started to notice that people are in a competition with one another. Someone makes something in 85 bytes, and someone else tries doing the same art in 70 bytes, or make it better.
The hashtag to post creations is #CSSMasterpieceIn100Bytes. They post their art and the code, and ask other people to tweak it.
It's a contest where they learn from one another.
Give it a try
I built this out of curiosity. I wanted to see that if you can make real art with 100 bytes?
And the answer is yes. Absolute yes. But check it for yourself.
Go to the tool. Insert border-radius: 50%; background: gold; and check what pops up. Then, try to make it better. Use less bytes. Be creative.
Send your creations, ask your friends. See what happens.
I've learned that limits make creativity stronger.
Try the CSS Masterpiece in 100 Bytes Tool →
What will you make?
Want to read more on CSS art? Check out our comprehensive guide: CSS Art Challenge: Create Amazing Art in 100 Bytes
Tried it? Show everyone the art with the hashtag #CSSMasterpieceIn100Bytes. I like seeing what people make.
Top comments (1)
Interesting. Thanks for sharing!