useful css generators

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.

box shadow generator

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 grid template generator

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.

CSS clip path generator

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.

gradient css generator

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.

background css pattern generator

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.

Example of using chrome dev tools

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.

Previous post:

Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Marko says:

    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!