Beautiful stories..told by gradients

Why I love gradients and how to use them in your next design

One of my favorite things in life is sky gazing. I’m blown away by how it looks different every day. It’s so magical! Sometimes it’s clear blue, stormy gray, or my favorite is when it holds a beautiful colored gradient charged by a sunrise or sunset

Gradients can mimic the depth of an ocean or draw your attention to the most important areas of a design. If you are a designer they are great at giving your visuals an extra boost!

At first, I was pretty afraid of trying out gradients and having them turn out “dirty” looking or look ready for a 90s style website.

After some research, a little guidance and some practice I have grown to love them! After all, a gradient is just a transition between two or more colors. The key is to make the transition as smooth as possible.

Wondering how to do so? Follow along below.

Choose your color palette

Try using colors of the same temperature-warm colors with other warm colors and cool colors with other cool colors. Otherwise, it could be difficult to get a smooth transition and you might get a “dirty” looking color in the middle like this.

Typically I go with 2–3 colors to keep it simple. Too many colors and you risk it looking too busy like this.

I used this article by fellow UX/UI designer, Alexis Wright, that teaches you how to use math to create the perfect color pallet. I decided to go with the two below.

Now the method..

There are three main gradient blends-linear, angular and radial. Pick whichever works best with the flow of your design.

Keep it simple and have fun!

Here are some music player screens I had fun designing last week for the #DailyUI challenge.

Feel free to let me know what you come up with!


Beautiful stories..told by gradients was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Reply

Your email address will not be published. Required fields are marked *