Ever since I started learning web development a few months ago, CSS art has become one of my favorite hobbies. Not only is it challenging, but it's also a way to express myself artistically while practicing my CSS skills.
However, if you've ever done anything CSS, you know how tedious and repetitive it can get (especially when not using any libraries or pre-processors like SCSS or Bootstrap). Along the way, I've taken my time to find tools that help ease the process a little bit, and these can be applied to your CSS art projects or your projects in general:
1. For border-radius
Setting the right border-radius for different shapes can get quite complicated. Fancy-Border-Radius by Mirko and Nills helps you play around with an interactive blob for which you can automatically generate its border-radius.
2. For gradients
Gradients are one of my favorite things in CSS, but they're as beautiful as they're hard to achieve the way we want to (at least in my experience). CSS Gradient lets you easily generate the CSS for both linear and radial gradients using up to three colors.
3. For color-matching and palettes
The thing that usually takes me the longest (yes, even when doing endless box-shadow pixel-art) is choosing a color palette for my art. To save me some time, I use Color Space, where I can simply input a color and it generates a BUNCH of colors that match and go well with it.
4. For color-picking
When basing off my art on an existing image/piece, or when I specifically want a project to match a certain picture, it's super important to rely on an image color-picker. Image Color Picker lets you find the exact color code from an image upload, URL, your screen, or your clipboard. It then also generates a color palette from the selected image.
5. For pixel-art
I wrote my last article on my process creating pixel-art with CSS, which inspired this article that includes a CSS pixel-art generator by using the same technique. This is super helpful if you want to create simple pixel-art designs and translate them to CSS immediately. I used it for my latest Pikachu animation:
-
You can check all my CSS art on my CodePen and find me on Twitter.
Know of any other tools/generators? Please share them below! Thanks for reading & happy CSSing! 😜