CSS径向渐变?

时间:2015-05-25 06:53:15

标签: css gradient radial-gradients

所以我在photoshop中为我的标题制作了这样简单的东西: http://i.imgur.com/U4GYzFV.png

我一直在研究CSS中的径向渐变,我发现了如何达到这一点,但我不知道如何调整它以使它看起来更像是photoshop。

任何帮助将不胜感激!

#header {
	height: 220px;
	width: 100%;
	background-image:
	radial-gradient(
	  circle closest-side,
	  #6fa5d9,
	  #51789d
	);
}
<header id="header"></header>

1 个答案:

答案 0 :(得分:5)

你会想要这样的东西:

background: radial-gradient(ellipse at center, #50779d 0%,#50779d 37%,#557fa6 47%,#557ea5 51%,#50779d 59%,#50789d 100%); 

Demo

Further Reading