15 种使用 CSS 制作的漂亮颜色渐变

2025-05-24

15 种使用 CSS 制作的漂亮颜色渐变

👋，我又带来了一份清单。在这篇文章中，我列出了 15 种使用 CSS 的美观颜色渐变（CSS 颜色渐变示例），你可以在下一个项目中运用它们。

我使用了 CSS 的线性渐变方法，并且只使用了“向左下方”的渐变方向。其实还有很多其他的渐变方向，比如“向右”、“向上”等等。想要了解更多关于线性渐变方法的信息，可以参考这篇freecodecamp文章。

让我们进入列表：



background-image: linear-gradient(to bottom right, #FF512F, #DD2476);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 1



background-image: linear-gradient(to bottom right, #FF61D2, #FE9090);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 2



background-image: linear-gradient(to bottom right, #72FFB6, #10D164);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 3
4.



background-image: linear-gradient(to bottom right, #FD8451, #FFBD6F);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 4



background-image: linear-gradient(to bottom right, #305170, #6DFC6B);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 5
6.



background-image: linear-gradient(to bottom right, #00C0FF, #4218B8);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 6



background-image: linear-gradient(to bottom right, #009245, #FCEE21);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 7



background-image: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 8



background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 9



background-image: linear-gradient(to bottom right, #FDABDD, #374A5A);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 10



background-image: linear-gradient(to bottom right, #38A2D7, #561139);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 11



background-image: linear-gradient(to bottom right, #121C84, #8278DA);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 12



background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 13



background-image: linear-gradient(to bottom right, #FFDB01, #0E197D);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 14



background-image: linear-gradient(to bottom right, #FF3E9D, #0E1F40);
Enter fullscreen mode Exit fullscreen mode

颜色渐变 15

恭喜！！您已成功阅读完这份长长的清单。我也在推特上发布了这条推文，您可以收藏起来，以便日后参考。

我从 Pinterest 收集了这些丰富多彩的想法。
希望对您有所帮助。分享这篇文章，评论一下你打算用哪个，也请分享你的反馈。

此外，我在Twitter上撰写有关 Web 开发的文章，关注我可以轻松了解 Web 开发技术。

谢谢！！很快再见……

文章来源：https://dev.to/devash98/15-beautiful-colour-gradients-using-css-4em1
Devto 翻译
PREV
Flutter 开发者的十大 YouTube 频道（2020 年）总结
NEXT
适用于您下一个项目的 10 个酷炫 Rest API