bfx Map Ramp是一个可以打造出图像映射彩色渐变混合特效的AE插件，插件通过使用灰度源图像映射渐变来创建多种颜色之间的渐变混合。通过使用灰度源作为映射渐变的基础，在多种颜色之间创建渐变混合。5个通道中的任何一个都可用于映射 – 红色、绿色、蓝色、Alpha 或亮度。借助附加选项，效果可用于色彩校正、创意甚至哑光工具。通过使用附加设置，您最多可以使用 6 种不同的插值模式。

canvas不仅可以做到渐变的效果,还可以指定线性渐变或圆形渐变

1 线性渐变

首先必须先使用createLinearGradient方法创建Linear Gradient对象,之后再用addColorStop方法添加渐变色,并指定给fillStyle或strokeStyle属性使用。

声明Linear Gradient对象

PS怎么做渐变 (How to Create Gradients in Photoshop)

渐变是Photoshop中一种非常常见且实用的效果，它能够为设计增添深度和层次感。本文将详细介绍在Photoshop中制作渐变的各种方法和技巧。

渐变工具概述 (Overview of the Gradient Tool)

在Photoshop中，渐变工具是创建渐变效果的主要工具。它可以通过不同的颜色和透明度组合来生成平滑的过渡效果。渐变工具的快捷键是G。

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：（Linear，Radial）。

当今，随着互联网的不断发展，Loading特效已经成为了一个网页设计中不可或缺的部分。一个好的Loading特效不仅可以提高用户的等待耐心，还能为网页增添更多的时尚和吸引力。本文将介绍一种使用纯CSS实现不断放大缩小和渐变的Loading特效的方法，帮助你为你的网页应用程序添加一个具有吸引力的Loading特效。

在本文中，我们将向你介绍如何使用CSS的关键帧动画和渐变，以及CSS3的变换功能，来实现一个具有动态效果的Loading特效。我们将提供详细的步骤和代码示例，帮助你快速掌握这个特效的实现方法。

欢迎观看illustrator教程，小编带大家学习 illustrator 的基本工具和使用技巧，了解如何在 illustrator 中创建、编辑以及应用自定义渐变。

illustrator 提供多种着色方式， 让您可以创造性地运用色彩，包括在图稿上应用渐变。渐变是将两种或更多种颜色逐渐混合在一起，形成像这个形状填充色这样的效果。使用本图标中的图稿，学习如何应用现有的渐变以及如何根据设计需要编辑渐变。

话不多说先上图：

echarts代码：

option = {
  backgroundColor: '#0f164a', \\ 背景
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  label: {
    show: true,
    position: 'top'
  },
  legend: {
    data: ['line', 'bar'],
    textStyle: {
    	color: '#ccc'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
      	color: '#fff'
      }
    },
  axisLine: {
  //x轴线的颜色以及宽度
    show: true,
    lineStyle: {
      color: '#0e96b0',
      width: 1,
      type: 'solid'
    }
  },
  splitLine: {
  //分割线配置
    show: false,
    lineStyle: {
    	color: '#fff'
    }
  },
  data: ['FSAPP1', 'FSAPP2', 'FSAPP3', 'FSAPP4'] 
  },
  yAxis: {
    axisLine: {
    //x轴线的颜色以及宽度
    show: true,
    lineStyle: {
      color: '#0e96b0',
      width: 1,
      type: 'solid'
    }
  },
  type: 'value',
  axisLabel: {
    textStyle: {
    	color: '#fff'
    }
  },
  splitLine: {
  //分割线配置
    lineStyle: {
    	color: '#014294'
    }
  }
  },
  series: [
    {
      name: 'line',
      type: 'bar',
      barGap: '-100%',
      barWidth: 15,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#003792' },
          { offset: 0.5, color: '#036aa4' },
          { offset: 1, color: '#08c9c4' }
        ])
      },
      z: 10,
      data: [10, 243, 16, 86]
    },
    {
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
      	color: '#0f164a'
      },
      label: {
        show: false,
        position: 'top'
      },
      symbolRepeat: true,
      symbolSize: [16, 2],
      symbolMargin: 3,
      z: 12,
      data: [10, 243, 16, 86]
    }
  ]
};

这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：

这样一个布局如何实现呢？