• Home
  • Services
  • Latest News
  • Contact
  • Home
  • Services
  • Latest News
  • Contact
  • News
  • Contact
Menu

CSS Gradient Tool Build

September 23, 2021 | James Brewer | Web Design

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

Related News

Meet Sadie | New Web Design Warrington Apprentice

Meet Sadie – Apprentice Web Developer

How to increase your ecommerce Warrington purchases using social media!

Meet Jay – Junior Web Developer

A Guide to Website Flat Designs with Adobe XD

Find out how we can help you achieve your digital dreams.

Or find more about us first.

The Lodge 1st Floor,
Tannery Court,
Tanners Lane,
Warrington,
WA2 7NA
01925 563 960 info@mosaicdigitalmedia.co.uk

© Mosaic Digital Media. 2022.

  • Privacy Policy
  • Privacy Tools