Gradients were one of the design scenarios lifted to the side by designers when they fell madly in love with flat design. While that matte era is still here, it’s safe to say that gradients are making a comeback in a big way! Earlier last year, it appeared that gradient designs were inspiring changes almost overnight. From backgrounds to overlays to subtle textures in UI elements, gradients were trending upwards.

However, the use of gradients works best for larger elements. In smaller elements, gradients can be difficult to see, and potentially distract or distort the vision of the user. But when used in larger spaces, gradients can help users focus on a specific call to action.

Soft gradients allow you to make design elements look tactile and clickable. They add dimension to call-to-action buttons and app icons. For that reason, they’ve become common in apps and website design.

Let’s get started.

Step 1: Pick any color

Starting with your primary color. Or just pick any color you want. I just pick the “#1687d9” color because it was the primary color of my last project.

Step 2: Linear gradient

By default, it was the solid color change that to linear-gradient and choose both side same color. And also change the opposite side color from hex to HSB, which stands for Hue, Saturation and Brightness. (HSB = 205, 90, 85)

Step 3: Change Hue value

Now, increase or decrease the H (Hue) value by 20–30 points, depending on your preference. I have taken two examples, the first decrease by 20 points and the second increase by 20 points.

Step 4: Change Brightness value

Similarly, increase or decrease the B (Brightness) value by 5–10 points. It will help to give more smoothness to the gradient.

Step 5: Change direction (up to you)

By changing the direction, gradients will look more trendy and modern. It’s up to you and you can play around with directional line until you get a better result.