SVG Effect: Outer Glow

index.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">

	<defs>

	<filter id="sofGlow" height="300%" width="300%" x="-75%" y="-75%">
		<!-- Thicken out the original shape -->
		<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />

		<!-- Use a gaussian blur to create the soft blurriness of the glow -->
		<feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />

		<!-- Change the colour -->
		<feFlood flood-color="rgb(0,186,255)" result="glowColor" />

		<!-- Color in the glows -->
		<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />

		<!--	Layer the effects together -->
		<feMerge>
			<feMergeNode in="softGlow_colored"/>
			<feMergeNode in="SourceGraphic"/>
		</feMerge>

	</filter>

</defs>
			
	<rect x="25%" y="37.25%" width="50%" height="25%" fill="white" filter="url(#sofGlow)" />

</svg>

style.css

  svg {
  	background: gray;
  	position: absolute;
  	height: 75%;
  	width: auto;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
  }

svg-effect-outer-glow.markdown

SVG Effect: Outer Glow

A Pen by Pedro Tavares on CodePen.

License.