<!DOCTYPE html> | |
<style> | |
.box { | |
width: 200px; | |
height: 200px; | |
margin: 20px; | |
background-image: radial-gradient(transparent, black); | |
filter: url(#lighting); | |
} | |
</style> | |
<div class="box"></div> | |
<svg width="0" height="0"> | |
<filter id="lighting" x="-0.5" y="-0.5" width="2" height="2"> | |
<feDiffuseLighting surfaceScale="200"> | |
<feDistantLight azimuth="135"/> | |
</feDiffuseLighting> | |
<feComposite operator="in" x="50" y="50" width="100" height="100" in2="SourceGraphic"/> | |
</filter> | |
</svg> |