如何创建一个双径向渐变混合在一起的网站背景答案

【问题标题】：How to create a website background with double radial gradients blended together如何创建一个双径向渐变混合在一起的网站背景
【发布时间】：2022-12-01 02:51:43
【问题描述】：

example background

我一直在尝试复制上面照片上的背景图案。在我看来，有一个线性渐变，其中嵌套了 2 个径向渐变。但我不确定...有人可以确认吗？有人可以解释如何在实际背景中定位 2 个径向渐变吗？感谢您的帮助。

我多次搜索谷歌，但我的查询似乎无法找到我要找的东西。我试过在我的线性渐变中嵌套径向渐变，但它不起作用。

background: linear-gradient(45deg, radial-gradient(#b1f2ff, #63e5ff, #3cdfff), radial-gradient(#dd2288, #ff0057, #cc08c7));

【问题讨论】：

标签： css background background-color styling color-gradient

【解决方案1】：

我希望这个简单的示例可以帮助您制作您的示例：

div{
width:100%;
height:400px;
background-image:radial-gradient(circle at 20% 70%,yellow 0%, transparent 30%),linear-gradient(45deg, #6634ff, #00e5ff);
}

&lt;div&gt;&lt;/div&gt;

要了解更多信息，请阅读以下文章： https://www.w3schools.com/css/css3_gradients.asp https://www.w3schools.com/cssref/func_radial-gradient.php

【讨论】：