Applying Gradient trends in Sass

The Flat design era is finally coming to an end… yup, and old trends are getting a makeover to renew themselves. One of them are the use of Gradients.

2018 it’s all about custom illustrations, vibrant saturated color schemes, drop shadows and depth, big bold typography and gra… wait of it… dieeeeents.

You could ask yourself in this moment, who else is using this? Let the examples begin:

Asana was one of the first pages (that I saw) with this new approach, applying it in a lot of different elements.

So, I made up a little tutorial for my first post in Medium, to achieve this cool looks with Sass Mixins.

Let start by defining 4 types of gradients, it’s all about the feeling, it is warm or it’s cold?.

One of the beauties of Sass are the use of variables and the function map-merge, if we put them together, we can define the gradient variables in our `variables.scss` file.

Next, we create some sass mixins to help us create the classes we are going to use to style our components, we are going to focus in three attributes:

This mixins will help us to minify the amount of code needed to achieve what we want. Next, we take advantage of the SASS maps to iterate the gradients we define in the variables.

For the gradients in text it’s a little more complicated, because the property color doesn’t work with linear-gradient, so we have to do a little hack, we define the linear gradient with the property `background-image` and then use `background-clip: text` to apply a kind of ‘mask’.

We can use the same approach to create classes to style borders with the gradients we create, this one have it’s own hack, using `border-image-slice`.

So you can get the next result:

I hope this post has helped you understand how to easily apply gradients to your project in a high-scalable way.

That’s all for today folks!

Related posts:

Having worked for a pharmaceutical company in the past, my first encounter with the concept of validation was the rigorous procedure of testing every aspect of software that was developed or altered…

Mia has been collecting art for more than a century, from cultures around the world and across history. We now have more than 90,000 objects in our collection, and, like most museums, we have…

The number one copywriting mistake that all marketers make — costing them precious Google ranking positions? Passive voice is the slouching of content writing. Here’s how to get rid of it and boost…