For so many years, I thought creating a colour gradient in CSS was something only REAL developers could do.
HOW WRONG I WAS!
Earlier this year I discovered two tools that make generating these a breeze for non-technical peeps like me. I used one of them to add the “Our API powers Nomad List” section on our About page.
There is a little tiny bit of coding involved, but literally it’s only copying and pasting from your existing CSS, so anyone can do it.
FULL DISCLAIMER: I’m the kind of non-technical noob that developers hate messing around in their code, I have no idea what i’m doing 99% of the time and tend to break stuff. Make sure you always keep an original copy of any files you edit so you can revert back if you break things. You could also hire a developer to do it for super cheap on Upwork, but where’s the fun in that 😉 This is the method I use, but i’m sure there are better ways of doing it that I have no idea about. So don’t judge me if this is a bad / messy way of doing things (ps. all this is assuming you have no staging environment or using GIT etc – just cowboy coding #FTW)!
Step 1 : Generate the CSS
A. Regular gradient
Introducing Colorzilla’s Gradient Editor – a nifty web-based tool for generating the full CSS for whatever background gradient you fancy.
B. Animated gradient
Now, if you are feeling extra fancy, why just do a regular gradient?
A badass like you deserves the best in life… you deserve an ANIMATED gradient.
Introducing the “does what it says on the tin” web-based tool, www.gradient-animator.com
Just click on the “Add colour” button twice to add two colours, and BOOM the CSS is generated for you.
Step 2: Update your style.css file
Alrighty, so now we have the CSS generated (woohoo!).
The next step is to update your style.css file. If your site is built on WordPress, skip this bit and jump to below the photo of the scary code.
I usually open and edit my files using Sublime Text simply because it’s free and it was the first text editor I ever tried.
Just find the class for the area you want to edit – this is the word preceded by a full stop (“.”) and in Sublime Text it appears as bright green.
If you’re creating a new section entirely, you’re probably tech savvy enough to not need full instructions but in case you are adventurous noob like myself then you’ll need to create a NEW class. The way I do it is to just copy an existing class in my style.css file for a similar looking section on the page, paste it at the bottom of my style.css file, and then just change the name and change the font colours etc if needed.
Then remove whatever code is there for the “background:” and paste in the new CSS that you just generated.
Here’s a sneak peek from my own code for the section I created on our About Page:
You can see the second paragraph is all the background code that I simply pasted in from the Colorzilla Gradient Editor.
If you are editing an existing section on your site, once you’ve re-uploaded / deployed your new style.css file then just refresh your page and you should see your background has updated. GREAT SUCCESS.
If looking at code like that makes you want to cry (as it did for me for years), DON’T PANIC!
I’m gonna guess you are probably using WordPress.
Most themes nowadays have a custom CSS section built into their options, so that makes it super easy.
In your Admin dashboard, find the section with all your Theme options then look for a tab with a “Custom CSS” section. Every theme author titles it different, but it’s often in the tab with the word ‘Style’ or ‘Styling’ in it.
Here’s a screenshot from my own Admin dashboard:
Just create a new Class and type it in here, along with that background code.
Then in Visual Composer of whatever builder you are using, go to the settings for the section you want to edit and look for the “Extra Class Name” field (this is sometimes labelled as “custom CSS’ here too if you’re using alternatives to Visual Composer, so just look for this kinda thing).
Here’s a screenshot from mine:
And BOOM you just paste your new Class into this field here that you already added into the Custom CSS section.
Go forth and gradient away….