弥散光渐变（Diffuse Light Gradient）是通过色彩的高度模糊来形成的一种独特的渐变，从而造成彩色弥散光效果的表现形式。自2017年iPoneX用于屏保之后开始风靡。

    平面设计师一般通过AI或PS实现这种效果，UI设计师用什么来实现呢？这里推荐大家使用「行空设计」，一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch

复制链接：https://xk.design?c=huicn 至PC端即可使用~

    对于本次教程，大家主要学会操作步骤即可，形状尺寸及颜色参数仅为参考，对配色有疑问的也别着急，下面有推荐宝藏配色网站哦，一起来看看吧~

—————————————————————————

01绘制形状并填充颜色

绘制一个圆角矩形及多个椭圆，椭圆形状任意，大小与圆角矩形相当。

圆角矩形：尺寸320*270；   圆角半径20；   填充纯白色#FFFFFF

其他椭圆：尺寸任意；          填充色如上图所示

02创建蒙版

    选中圆角矩形，点击上方的「创建蒙版」按钮，使得椭圆形状置于圆角矩形内。可以根据个人想要的画面效果适当调整椭圆大小及位置。

    如果你是直接使用画板作为背景，则不需要创建蒙版。在行空设计（https://xk.design）中，画板仅显示画板内的内容，超出画板的内容将自动隐藏。

03高斯模糊

选中所有椭圆形状并设置高斯模糊50。随后添加文字并进行简单排版，效果就出来啦。

04配色网站

    弥散渐变虽然操作不难，但是对色彩的拿捏度需要恰到好处，这里空空给大家推荐4个宝藏配色网站，助你设计路上一路顺通，不再因为配色卡壳。

1、Adobe color 在线色轮设计神器：https://color.adobe.com/

    Adobe color 是一家在线色轮提取网站，使用兼容性很强，采用的配色方法也更加专业，支持在色环上以互补色、对比色这样的色彩调和方式生成配色，用户可以根据自己的配色要求进行实时搭配，是配色的必备良器。

2、Coolors在线快速配色方案生成器：https://coolors.co/

    Coolors主要提供Generate和Explore两类功能服务。会随机产生一套包括五种颜色的方案，并展示它们的色彩参数与代码，我们可以对其中任意一种颜色单独进行色调、饱和度、亮度等选项的调整，也可直接修改其参数。

3、WebGradients可生成CSS代码的渐变色网站：https://webgradients.com/

    WebGradients是一个拥有大量渐变色参考模板的工具网站。模板质量较高，并且配色更适合UI设计师。不仅如此，WebGradients 支持CSS代码拷贝，为前端小哥省事，真是维护同事关系的好帮手！

4、LOL Colors可爱多彩的高颜值配色网站：http://www.lolcolors.com

    LOL Colors是一款非常简洁,文艺又活泼，小资的色彩方案搭配神器。把鼠标移动到不同颜色的水滴上会提示色彩代码(Hex Code)的颜色值，设计师们可以在这里找到很多不同色彩的多变组合。

    弥散渐变教程和配色网站已经分享结束啦，看着是不是也不难，那你也动手实操起来吧~关注空空，我会在这里持续分享UI设计干货。

—————————————————————————

官网地址：https://xk.design?c=huicn 扫码关注行空设计公众号

 扫码加入行空设计公测用户群

Powered by Froala Editor