<div class="item">
	<h1>linear-gradient</h1>
	<svg id="linear">
	<defs>
		<linearGradient id="linearGradient"
							 x1="-9.41" y1="16.31"
							 x2="313.41" y2="202.69"
							 gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="aqua"/>
			<stop offset="1" stop-color="#0071bc"/>
		</linearGradient>
	</defs>
	<rect fill="url(#linearGradient)" width="304" height="219"/>
  </svg>
</div>
<div class="item">
	<h1>radial-gradient</h1>
	<svg id="radial">
	   <defs>
		   <radialGradient id="radialGradient"
								 cx="199.5" cy="70"
								 r="132.47"
								 gradientTransform="translate(-47.5 0.3) scale(1 1)"
								 gradientUnits="userSpaceOnUse">
			   <stop offset="0" stop-color="aqua"/>
			   <stop offset="1" stop-color="#0071bc"/>
		   </radialGradient>
	   </defs>
	   <rect fill="url(#radialGradient)" width="304" height="219"/>
   </svg>	
</div>

div.item {
	max-width: 300px;
	margin: 0 auto;
	margin-bottom: 20px;
	h1 {
		font-size: 20px;
		font-family: sans-serif;
		margin: 10px 0;
	}
}

svg{
	width: 100%;
	rect {
		width: 100%;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.