A new design trend sweeping the front UI world earlier this year is “color gradients”. Starting from the LOGO of INSTAGRAM, Taobao, QQ and other Ali-based apps also began to use a large area of gradient color as the UI color scheme.

What is called the gyrations, fashion is always cycle, was proposed to flat, flat is not just a space and color, we found that the taiping play does not open, and designed a flat shadows, MD and put back into the design, material and space now also began to recover the natural colour, rich color and become a new trend.

Look at the development of the hardware, that because rendering shadow, gradient is very consumption performance design, design development as far as possible avoid the use of, and now the hardware performance enhancements, limitation of hardware are also smaller, rendering the process optimization, rendering speed, the browser can also open the GPU acceleration, what we can do is becoming more and more interesting.

If you want to use a gradient, you can only use dom elements. If you want to use text or font icon to gradient, you can only revert to the cut image flow of the soil and fire.

Of course not because we have a new CSS property called background-clip

The code shown

To set the gradient or image of the text or font icon, just two steps are required:

  • Set text color transparencycolor: transparent;
  • Set background clipping to text-webkit-background-clip: text;

Attribute is introduced

Background Clip is a new property of the CSS Wallpaper and Borders Module Level 3. It is used for setting the display area of the background in the box model. However, I did not support IE8, but also to add a prefix can be used, but the attributes of the function is very powerful.

JSbin

The demo source code