How to create robust gradients quickly and simply for your next project

Overview

For quite some time, practical UI design has been boxed in by various gradient types that, while workable, don’t always get you the result that you’re looking for.

Today, I’m going to show you how you can create advanced, scalable gradients that will look good on any screen, and don’t require in-depth knowledge of CSS.

Leveraging SVGs

Instead of relying on older tooling, we’ll be leveraging the full power of Scalable Vector Graphics (SVGs) to get us where we want to go.

Create a new file

First and foremost, create a new file in your vector editing software.

In my case, I’m using Affinity Designer, but you can really use any vector editing software that you like.

Creating your layers

Now for every layer that we add to our gradient set, we will probably want to create a new layer, just to keep it organized and easy to manage.

Choosing your base color

From here, we’ll want to choose a base color for our gradient, in this case I will be using a dark blue (#020835).

Adding your gradient layers

Now that we have a base color, we can start adding gradients within our different layers. For this, I like to use a radial gradient that has the opacity set to zero (0) on the end for good falloff effect.

This effect below can be achieved by filling your layer with the desired opaque color, and then using a gradient to make that color fade into your base color (shown below).

As you can see below, by modifying the falloff of the gradients applied, we can achieve more of a point-light effect, or a soft, larger light, depending upon how quickly we allow the color to falloff:

And you can see how the colors begin to stack in your layers panel:

Adding subtle touches

You can also use this same technique to create gradients that originate outside of the artboard to create an effect very akin to light-leak:

And as you bring the gradient origin closer into the artboard, you’ll begin to see more interplay between the gradient layers:

Exporting and applying to your UI

So let’s say that we were happy with this gradient here. What we’d do now, is export our entire file as an SVG.

Note that it can be rather small just because it is an SVG file and quality should not be effected by size.

Once you’ve saved your SVG, you’ll want to open it up in your favorite web browser to make sure that it is rendering correctly and that you don’t have any artifact or other weirdness going on.

Applying programmatically

Application of this gradient programmatically is actually even simpler than making it.

Because it is purely decorative, we can set it as a background image of our html body, center the position, and set the size to cover so that it covers the whole view-port evenly.

Looks good! But what if we wanted more of the upper portion of our gradient? No worries, we’ll just set the background-position to ‘top’ and watch the magic happen!

Bam, taken care of.

Now are there other ways that this technique can be applied? Absolutely, and I would highly recommend that you experiment to find the approach that works best for you.

That said: a couple more things.

1. If you want to be able to “see” more of the gradient within the view-port without scrolling, just make it more horizontal and the ‘cover’ property will take care of the rest.

2. DON’T STRETCH IT! If you want to make a nice SVG gradient look like crap really fast, stretch it out of aspect ratio.

And there you have it

Now you know how to create awesome, custom gradients that are scalable and will render great on any screen size!

Let me know if you have any questions or how you might use a technique like this in the comments! :D

Nick Lawrence Design
Website | Portfolio