| Updated 03.05.22
Useful CSS Generators
I’ve seen a couple of different posts on the various CSS generator tools that are out there to make your life easier, and it got me thinking about some of the one’s I’ve used in the past.
Box shadow generator
This is something that I probably should have got in the habit of writing out from scratch by now, but I still reach for a generator most of the time to quickly fine-tune the shadow I’m going for. This generator by CSSmatic is one that I’ve used the most, although there are now much more modern ones out there like this one.
Recently I have switched up and started to use drop-shadow more often as it better supports transparent png’s and has improved performance because it can utilise hardware acceleration. I’ve tried to mainly use drop-shadow since updating my website. Read more about the difference between the two here on CSS Tricks.
Make some waves
Here’s a funky CSS generator that I’ve used only once in the past when creating a water effect using SVG’s. I can think of a number of cool use cases for it that I will probably make use of in the future. Svgwave is another wave creating tool that looks really useful.
CSS Grid
If you need to make a bit of a complex layout using CSS grid, it can be very useful to visualise the layout on the screen. This generator does just that and gives you a nice visual way to make a CSS grid layout with ease. With each of these tools, there are usually a number of different ones out there that you can use, like here, or here.
CSS Clip Path
There was a bit of a buzz going around not too long about how awesome CSS clip-path is going to be once it gets better support. So far I don’t think the support is good enough to have this on large projects, but it’s definitely on its way. Check out this awesome CSS clip-path generator for yourself and see if you can find any good use cases for it.
Gradients
Throwing a gradient background on anything can make it look a million times nicer. The site cssgradient.io is the tool I’ve used the most in my projects as it’s super easy to use and fine-tune just right. Recently I have enjoyed using this one call mycolor.space, it has some nice ready-made gradients that you can quickly copy. For some really nice looking ready-made gradients that are computer generated using algorithms, be sure to check out the generator from mybrandnewlogo.
CSS Background Patterns
I’ve used this website at least a couple of times when I needed a quick, lightweight repeating pattern. You can adjust any of the ready-made patterns to your liking and then simply copy the CSS code. Another great site is this one called gradient magic, it has a bunch of interesting styles that you can just copy straight into your CSS. The site magicpattern.design has a number of other different CSS generators to play with, such as this nice gradient tool.
Easing
Sometimes it can be very time consuming just fiddling around with a cubic bezier curve to get it just right for your needs. That’s where great visual tools like this one come to the rescue. I love how you can compare and see the different cubic-bezier options against each other.
In addition to using site’s like this, there are some great built-in options within Chrome developer tools like below.
Create beautiful code screenshots
This one isn’t a CSS generator, but ray.so is a tool that I’ve used in the past and absolutely love so I thought I would share it. You can use it to easily create amazing screenshots of your precious code like the one below.
Collection of tools
Finally, for the great all-rounder of useful links, check out Omatsuri or this amazing and continually updated list of various different tools for web devs called Tiny-helpers.
Hi Dalton. I hope you’re doing well!
I stumbled upon this article.
I wanted to ask you if would you consider adding a tool I made. It is a Button Generator, completely free (https://markodenic.com/tools/buttons-generator).
Thanks in advance, and let me know if there’s anything I can do for you.
Anyways, have a great day!