CSS3中的渐变颜色和透明度为设计师带来了更加丰富的选择。渐变颜色能够实现从一种颜色到另一种颜色的平滑过渡。而透明度则可以使得元素变得更加半透明，让设计更加优美。

/* 渐变颜色 */
background: linear-gradient(to bottom, #FFFFFF 0%, #000000 100%);
/* 上面的代码表示背景颜色从白色渐变到黑色 */

上面的代码中，我们使用了linear-gradient()函数来定义渐变。to bottom表示渐变方向为从上到下，#FFFFFF和#000000是表示渐变开始和结束时的颜色，0%和100%表示渐变的起点和终点。

/* 透明度 */
opacity: 0.5;
/* 这段代码表示元素透明度为50% */

通过设置opacity属性，可以使得元素变得更加半透明。取值范围是[0, 1]之间，0表示完全透明、1表示完全不透明。需要注意的是，设置透明度的元素以及它的子元素都会继承该透明度。

在实际应用中，渐变颜色和透明度可以结合使用，形成更加复杂的效果。比如，可以将一个按钮的背景颜色设置为渐变色，并让它的透明度随着鼠标移动而变化，从而实现更加生动的交互效果。