在网页设计中，颜色渐变往往可以为页面增添一份动感和美感。而波浪状渐变则是一种非常流行的效果，其在背景图和按钮等元素上的运用较为广泛。

background: linear-gradient(45deg, #FFC3A0 0%, #FFAFBD 100%);
background-size: 200% 200%;
animation: wave 3s ease-in-out infinite;
@keyframes wave{
0%{
background-position: 0 0;
}
100%{
background-position: 200% 0;
}
}

上面这段代码实现的是一个水平方向的波浪状渐变。其中，linear-gradient是线性渐变，在这里指定了渐变的起点和终点颜色。background-size设置为200% 200%，因为波浪状的重复周期为两个整个容器的宽度。

接着，我们使用了animation动画。wave是自定义的动画名称，3s指的是动画的时长，ease-in-out为缓进缓出效果，infinite则表示动画无限循环。在@keyframes中定义了0%和100%两个关键帧，即动画的开头和结束位置。通过改变background-position属性实现波浪状的移动效果。

若要把波浪状渐变的效果应用到页面元素中，只需将该代码放置到对应的CSS属性中即可。