CSS Gradient Tool Build

Here at Mosaic Digital Media, we get time allotted for independent training each week to develop our skills relevant to our roles. This can be in the form of subject reading and research or in creating little projects that utilise specific technologies and skills that we would like to improve our knowledge of.

In the web team, we regularly use HTML, CSS, PHP and JavaScript (amongst others) to create all of our websites. Out of these skills, I have the slightest practical knowledge with JavaScript – a programming language that uses scripts – or little pieces of code – to do a wide array of things on a website when you view it. This could include animations, changing colours or showing/hiding information.

So, to improve my skills, some of my training time has been dedicated to JavaScript. I find programming languages to learn by doing something practical, as such I decided to create something that uses JavaScript.

As well as building websites, my role also involves designing websites, as such, I work with a lot of colours and gradients. Therefore, I decided to build something that bridges the gap between design and development and create a tool that could automatically generate a random gradient at the touch of a button.

The end product was a tool that will generate a random gradient with two colours and a random angle of direction. To make it more user friendly, I also included a button that will copy the CSS code needed to replicate the gradient to the clipboard for use elsewhere.

The generator was built with HTML, SCSS and JavaScript, using the online development environment CodePen. The HTML and CSS code is nothing exceptional, but it’s the JavaScript that does all of the magic.

Each time the button is pressed, it will generate two random colours via their hex value and choose a number between 0 and 360 (for the angle of direction).

It then uses a function to add the various pieces together in a string, in the same way, that CSS code will display a gradient – this then allows the gradient to be used within the project, such as where the gradient is displayed

See the Pen
CSS Random Gradient Generator by James Brewer (@MDMJames)
on CodePen.

Or take a closer look here: https://codepen.io/MDMJames/full/GRmqLer