Search code examples
cssgradientradial-gradients

CSS Radial Gradient?

So I made something simple like this in photoshop for my header: https://i.sstatic.net/i6zKR.png

and I've been doing research on radial gradients in CSS and I found how to get to this point, but I don't know how to adjust it to get it to look more like the photoshop one.

Any help would be appreciated!

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

Solution

  • You would want something like this:

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

    Demo

    Further Reading