CSS gradient time saver

CSS Gradients are fairly easy to achieve, but this tool makes implementing them a breeze! Back in the day we used to use a 1px wide png set to repeat over the background to achieve a gradient effect, until the rise of the CSS gradient, a highly efficient way to achieve any gradient you may need.

CSS, JavaScript and HTML are programming languages that basically form the cornerstone of all websites. We'll get onto HTML and JavaScripts another time, but CSS basically controls the look and appearance of pretty much every element of a website you can see. Positioning, spacing, colouring, fonts, sizes, backgrounds, transitions, shadows, and many more elements are all configured using the style sheet (or a number of). Not only this, but you can call different styles for particular elements at specific screen sizes. This is how we achieve a responsive design that adapts to any screen size or device you may be using.

As mentioned above, gradients have always been a little bit of a tricky thing to pull off. For a long time we would slice a 1 pixel section of a gradient image, save it as a png, and then set it to the background of an element and tell it to repeat on the 'X' or 'Y' axis. It worked great to be fair. But CSS gradients have made things so much easier and more efficient. Over the years we have built hundreds of websites, and now and again we come across tools that just make life a lot quicker and easier. There are many other tools we'll share with you but today, let me introduce Colorzilla (and no, that's not a typo - side geek fact, style sheets are in US English so colour becomes color). This incredibly simple (and we mean simple in the way the website looks) tool allows you to generate any kind of gradient you can think of in a matter of minutes, allowing you to control all colours, opacities and locations, and then spitting out the CSS ready for you to copy and paste. It even takes care of the bross browser compatibility hacks for you.

I'm sure anyone non-geek will find this about as interesting as watching paint dry, but to us it's just a great little tool that we use time and time again to save time, and save you money.

And here is a little example thanks to Colorzilla...

 
Share:

Related Posts

RIP Flash, and thank you

RIP Flash, and thank you

CSS gradient time saver

CSS gradient time saver

Driving digital performance

Driving digital performance