Booklet

author

kalypso

Design

How to Add Impressive Gradients in UI Design

design

Design

|

How to Add Impressive Gradients in UI Design

Tips & Resources

Learn basic types of gradients

There are several types of gradients. All involve a central starting point where the color starts and progressively blends into other colors. For this article, I will focus on Linear Gradients:

• Linear

A linear gradient creates a band of colors that progress in a straight line.

The gradient transitions smoothly from one color to the next.

Create smooth transitions

The transition between colors should be really smooth. Ideally, the user shouldn't notice the place where one color flows to another.

To create a smooth transition, you need to spend more time playing with color stops.

Create a smooth transition

Don't choose color randomly!

Not all colors work well with each other. For example, by pairing

complementary colors, you probably get that bad-looking color

• Avoid using complementary colors

• Use analogous colors

• Use shades of the same color

Analogous colors (colors that are next to each other on the color wheel)

Convey emotion or mood

Color evokes emotional responses. We can use this color property to connect with the audience on a deeper level.

Think about what you want your users to feel when they interact with your product.

Bright, bold colors stir positive feelings

Deep tones bring calm

Gradient Resources:

gradients.io

uigradients.com

webgradients.com

cssgradient.io

uigoodies.com

grabient.com

grdnts.com

@kalypsodesigns

More booklets by kalypso

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets