Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!


Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

Gradient Color in App Design: Trends, Examples & Resources

Mockplus Team 68656 Views

Gradient has been one of the major trends in mobile app design. This article introduces 4 practical examples and resource of gradient in app design.

Gradient refers to the mysterious and romantic color transition of an object from bright to dark, deep to shallow, or from one color to another. At the very beginning when theflat design has just risen, designers were keeping away the gradient in design. However, since Instagram changed the logo from classic Polaroid camera to a brightly colored flat icon, the gradient in app design is gradually making a comeback.

1.gradient UI.gif

The reason for gradient’s rise is that flat design color combinations are extremely easy to cause homogeneity. If designers pursue a design language with rich visual, the gradient is the best choice. Let's take a look at the examples of gradient color used in mobile APP.

1. Linear gradient

As a basic expression method in gradual design, the linear gradient is also one of the most common creative techniques. In general, there are 3 kinds of the gradient according to the direction: horizontal gradient, vertical gradient and diagonal gradient. Following are the examples.

Horizontal gradient:

This is a concept design of an eCommerce app, including settings, authorization, and coupons. The designer presents the user's coupon information by cards which use a uniform double-color horizontal gradient, highlighting the information on the card. Overall, the interface is minimalist and elegant.

Vertical gradient:


How to make your weather APP stand out? Look at this one. The designer uses the vertical gradient very clever to create a sophisticated evening sky background with the APP's timeline. The interface and function complement each other.

Diagonal gradient:


The landing page of this music app was created by the rapid prototyping tool Mockplus. When you open the APP, it will kindly ask your current state to automatically filter the music in line with the current mood.

The designer uses the diagonal gradient as a background, the warm gradual interface makes the interface more friendly and cordial. Besides, the diagonal gradient makes the interface more lively and rich, giving users a soft and humane AI product experience.

2. Gradient overlays on the image

5.background gradient .gif

Adding gradient overlays on the background and head image can strengthen the sense of wholeness, making the user aware of other more important and crucial elements that enhance the page's readability. The effect of this design on the big image is especially noticeable. In addition, the overall image will be more mysterious, elegant and attractive.

You should also pay attention to the selection of the background image, picture content and tone. All the elements need to be consistent, the use of translucent could make the picture more delicate. Gradient needs to strengthen the readability of the page information and cannot be decorated for decoration.

3. Multi-angle multi-level overlay

6.instagram logo.jpeg

As Instagram changed its icons and UI, Instagram lead designer Ian Spalter wrote a post about the icon change on Medium.

“If the lens is a bridge into the bolder, simpler glyph, the rainbow is a bridge into the colorful gradient. Color has always been a huge part of Instagram —you see it in the classic app icon, filters, and the community’s photos and videos.

When we started reimagining the rainbow, we looked at more minimal options, but ultimately we needed more warmth and energy to complement the glyph.”

Instagram captures the core elements of the original logo: the rainbow, the lens, and the viewfinder, which created a minimalistic and colorful rainbow of images with a multi-angle, multi-layered overlay on the background. Specifically, this icon mainly uses a set of the linear diagonal gradient, plus two sets of spherical radial gradient overlay, using color wisely in UI design.


4. Functional gradient effect


Gradient is not only limited to be used as a single background decoration, it can also have some functionality. Designers will use the same color, similar color, approximate color, contrast color, the complementary color to separate each menu item clearly. So that the interface keeps the balance at the same frequency that makes the picture is colorful, more rhythmic and more comfortable.

Gradient design tools


This site has thoughtfully given every color a corresponding name. Click on the upper left corner to browse all colors, you can also select a color from the navigation bar above, presenting the color with all the corresponding gradient plan. After selecting the right one, you can copy the color values just by clicking the value shown above.




CoolHue is a pretty useful gradient background website that offers about 30 different gradient backgrounds. The elements can be downloaded for free as a photo format or as CSS3 syntax. Just add it to the site style form, you can apply gradient color in any area.



Under the rapid development of mobile APP, the gradient in app design is a result of the continuous improvement of people's aesthetic level. In the UI design, the gradient is often used with the shadow and external light to enhance its three-dimensional effect. Although the gradient is very hot in the current design trend, its unique style is still based on the needs of the APP itself. So it can not has a negative impact on function and readability.



Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here