Are you searching for a CSS Shape? Look no further! I have collected all1 of them into one place.
👉 css-shape.com 👈
The only resource you will ever need for CSS Shapes!
Pfff, another website for CSS Shapes?! We already have countless websites and all the shapes are already made a ton of times! Why another one?
Don't leave yet and continue reading to understand why my website is better than most of the online resources!
Single-element Implementation
Every shape is created with a single element. No complex HTML code whatsoever. Only One element and that's all!
Most of the shapes don't even require pseudo-elements so they can be applied to images as well.
Modern CSS
No magic numbers, No hacks, No headaches! Only modern CSS is used to create the different shapes. Forget about those old and obsolete codes and discover new ways to easily create CSS shapes!
Optimized Code
When using modern CSS, we don't need a lot of code. Only a few lines are enough to create even the most complex shapes. I optimized each code to be the smallest possible.
Flexibility
An optimized code means that it's unreadable, hard to understand, and difficult to update. This is not an issue because I am relying on CSS variables to control the shapes.
No need to dig into the code and make a lot of changes to control the shape. You only have to adjust a few values to get any variation you want.
Easy to use
I hope you are comfortable using NPM packages and the command line because you don't need any of them! One click is all that you need to copy the CSS code and use it. As simple as that!
You can also edit the code online to update the different values and see the changes live before copying the code.
Not yet convinced? Visit the website and I am sure you will instantly click that bookmark button! If you don't, I will haunt you for the rest of your life 👹
👉 css-shape.com 👈
1: Saying "all" the shapes is a bit pretentious but that's the ultimate goal. I am launching the website with many CSS Shapes but I have even more on the waiting list. This is only the beginning and more Shapes will be added in the future.
You can also help! If you see a missing shape or you want a specific one, drop a comment and I will try to add it 👇
You want to support me?
OR
Top comments (5)
Very cool concept, Temani. Thanks for sharing with us!
Thanking in advance for all the times I'll use this in the future 🙏
I love how these are all done with a single element.
this dude LOVES dashes in his domains lol
Nice, someone might ask for TailwindCSS next. Asking for a friend.
Some comments have been hidden by the post's author - find out more