<h1>CSS Lens Flare</h1>

<p>Made using <a href="https://doodad.dev/gradient-generator/">Doodad.dev Gradient Generator</a><sup>*</sup></p>

<figure>
  <figcaption>Here both the image and the lens flare are attatched to one element using the <code>background-image</code> property.</figcaption>
  <div class="background-image-with-lens-flare"></div>
</figure>


<!-- Using just background-image -->
<figure>
  <figcaption>Here's the original image for comparison:</figcaption>
<div class="background-image"></div>
</figure>

<!-- Version with better accessibility -->
<figure>
    <figcaption>
      This version uses an <code>&lt;img&gt;</code> tag to improve accessibility for non-decorative images:
    </figcaption>
  <div class="image-and-lens-flare-container">
  <img src="https://res.cloudinary.com/jbbb/image/upload/c_scale,q_auto:eco,w_500/v1625695338/dog_cdtbxh.jpg" alt="a husky type dog standing on a log looking pleased with itself">
  </div>
</figure>

<p>The image is placed inside a container <code>&lt;div&gt;</code>. Lens flare is added to the container using the <code>:after</code> psuedo element.</p>

<figure>
  <figcaption>That's all folks!</figcaption>
  <div class="background-image-with-warner-bros"></div>
</figure>

<hr>

<p><sup>*</sup>doodad.dev is one of my projects</p>

/* Relevant CSS starts here */
.background-image, .background-image-with-lens-flare {
  height:500px;
  width:500px;
}

.background-image {
  background: url(https://res.cloudinary.com/jbbb/image/upload/c_scale,q_auto:eco,w_500/v1625695338/dog_cdtbxh.jpg);
}
  
.background-image-with-lens-flare  {
  background-image:radial-gradient(25% 25% at 70% 70%, rgba(0, 0, 255, 0) 93%, rgba(0, 0, 255, 0.01) 93.14%, rgba(0, 0, 255, 0.03) 93.29%, rgba(0, 0, 255, 0.04) 93.43%, rgba(0, 0, 255, 0.05) 93.57%, rgba(0, 0, 255, 0.06) 93.71%, rgba(0, 0, 255, 0.09) 94%, rgba(0, 99, 159, 0.09) 94.14%, rgba(0, 124, 157, 0.08) 94.29%, rgba(0, 149, 162, 0.08) 94.43%, rgba(0, 173, 168, 0.07) 94.57%, rgba(0, 199, 168, 0.07) 94.71%, rgba(0, 255, 0, 0.06) 95%, rgba(111, 254, 0, 0.08) 95.29%, rgba(150, 254, 0, 0.09) 95.57%, rgba(177, 254, 0, 0.11) 95.86%, rgba(200, 254, 0, 0.12) 96.14%, rgba(220, 254, 0, 0.14) 96.43%, rgba(255, 255, 0, 0.17) 97%, rgba(255, 230, 57, 0.16) 97.14%, rgba(254, 206, 0, 0.15) 97.29%, rgba(250, 182, 0, 0.14) 97.43%, rgba(246, 157, 0, 0.13) 97.57%, rgba(243, 130, 0, 0.12) 97.71%, rgba(255, 0, 0, 0.1) 98%, rgba(255, 0, 0, 0.09) 98.29%, rgba(255, 0, 0, 0.07) 98.57%, rgba(255, 0, 0, 0.06) 98.86%, rgba(255, 0, 0, 0.04) 99.14%, rgba(255, 0, 0, 0.03) 99.43%, rgba(255, 0, 0, 0) 100%), radial-gradient(40% 40% at 65% 65%, rgba(27, 199, 0, 0.04) 13%, rgba(86, 207, 0, 0.07) 13.71%, rgba(119, 215, 0, 0.1) 14.43%, rgba(146, 224, 0, 0.13) 15.14%, rgba(170, 232, 0, 0.16) 15.86%, rgba(193, 241, 0, 0.19) 16.57%, rgba(239, 255, 117, 0.25) 18%, rgba(239, 255, 117, 0.22) 18.57%, rgba(239, 255, 117, 0.19) 19.14%, rgba(239, 255, 117, 0.16) 19.71%, rgba(239, 255, 117, 0.13) 20.29%, rgba(239, 255, 117, 0.1) 20.86%, rgba(239, 255, 117, 0.04) 22%), radial-gradient(25% 25% at 37% 37%, rgba(51, 112, 255, 0.1) 0%, rgba(82, 171, 255, 0.25) 14%, rgba(82, 134, 255, 0) 15%), radial-gradient(25% 25% at 23% 23%, rgba(230, 138, 0, 0) 44%, rgba(230, 0, 69, 0.17) 50%, rgba(230, 80, 0, 0) 54%), radial-gradient(25% 25% at 14% 14%, rgba(246, 224, 94, 0) 0%, rgba(254, 252, 190, 0.37) 20%, rgba(246, 224, 94, 0) 22%), radial-gradient(100% 100% at 23% 23%, rgba(26, 32, 44, 0) 0%, rgba(26, 32, 44, 0) 42%, rgba(45, 26, 34, 0.06) 47%), radial-gradient(25% 25% at 23% 23%, #fffff0 0%, #ffffff 14%, rgba(254, 215, 215, 0) 70%), radial-gradient(50% 50% at 25% 25%, rgba(255, 204, 214, 0.3) 1%, rgba(255, 245, 247, 0.3) 50%, rgba(255, 245, 247, 0) 100%), url(https://res.cloudinary.com/jbbb/image/upload/c_scale,q_auto:eco,w_500/v1625695338/dog_cdtbxh.jpg);
}


.image-and-lens-flare-container {
  position:relative;
  width:500px;
  height:500px;
}

.image-and-lens-flare-container:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:radial-gradient(25% 25% at 70% 70%, rgba(0, 0, 255, 0) 93%, rgba(0, 0, 255, 0.01) 93.14%, rgba(0, 0, 255, 0.03) 93.29%, rgba(0, 0, 255, 0.04) 93.43%, rgba(0, 0, 255, 0.05) 93.57%, rgba(0, 0, 255, 0.06) 93.71%, rgba(0, 0, 255, 0.09) 94%, rgba(0, 99, 159, 0.09) 94.14%, rgba(0, 124, 157, 0.08) 94.29%, rgba(0, 149, 162, 0.08) 94.43%, rgba(0, 173, 168, 0.07) 94.57%, rgba(0, 199, 168, 0.07) 94.71%, rgba(0, 255, 0, 0.06) 95%, rgba(111, 254, 0, 0.08) 95.29%, rgba(150, 254, 0, 0.09) 95.57%, rgba(177, 254, 0, 0.11) 95.86%, rgba(200, 254, 0, 0.12) 96.14%, rgba(220, 254, 0, 0.14) 96.43%, rgba(255, 255, 0, 0.17) 97%, rgba(255, 230, 57, 0.16) 97.14%, rgba(254, 206, 0, 0.15) 97.29%, rgba(250, 182, 0, 0.14) 97.43%, rgba(246, 157, 0, 0.13) 97.57%, rgba(243, 130, 0, 0.12) 97.71%, rgba(255, 0, 0, 0.1) 98%, rgba(255, 0, 0, 0.09) 98.29%, rgba(255, 0, 0, 0.07) 98.57%, rgba(255, 0, 0, 0.06) 98.86%, rgba(255, 0, 0, 0.04) 99.14%, rgba(255, 0, 0, 0.03) 99.43%, rgba(255, 0, 0, 0) 100%), radial-gradient(40% 40% at 65% 65%, rgba(27, 199, 0, 0.04) 13%, rgba(86, 207, 0, 0.07) 13.71%, rgba(119, 215, 0, 0.1) 14.43%, rgba(146, 224, 0, 0.13) 15.14%, rgba(170, 232, 0, 0.16) 15.86%, rgba(193, 241, 0, 0.19) 16.57%, rgba(239, 255, 117, 0.25) 18%, rgba(239, 255, 117, 0.22) 18.57%, rgba(239, 255, 117, 0.19) 19.14%, rgba(239, 255, 117, 0.16) 19.71%, rgba(239, 255, 117, 0.13) 20.29%, rgba(239, 255, 117, 0.1) 20.86%, rgba(239, 255, 117, 0.04) 22%), radial-gradient(25% 25% at 37% 37%, rgba(51, 112, 255, 0.1) 0%, rgba(82, 171, 255, 0.25) 14%, rgba(82, 134, 255, 0) 15%), radial-gradient(25% 25% at 23% 23%, rgba(230, 138, 0, 0) 44%, rgba(230, 0, 69, 0.17) 50%, rgba(230, 80, 0, 0) 54%), radial-gradient(25% 25% at 14% 14%, rgba(246, 224, 94, 0) 0%, rgba(254, 252, 190, 0.37) 20%, rgba(246, 224, 94, 0) 22%), radial-gradient(100% 100% at 23% 23%, rgba(26, 32, 44, 0) 0%, rgba(26, 32, 44, 0) 42%, rgba(45, 26, 34, 0.06) 47%), radial-gradient(25% 25% at 23% 23%, #fffff0 0%, #ffffff 14%, rgba(254, 215, 215, 0) 70%), radial-gradient(50% 50% at 25% 25%, rgba(255, 204, 214, 0.3) 1%, rgba(255, 245, 247, 0.3) 50%, rgba(255, 245, 247, 0) 100%);
}



/* 
Relevant CSS ends here.
The rest of the css is for making the page look nice
*/


body {
  background:#222;
}

:root {
   font-size:18px;
   color: #fff;
   font-family:monospace;
  line-height:1.7;
}

body > * {
  width: 500px;
  margin-left:auto;
  margin-right:auto;
  margin-top:1rem;
}

figure {
  margin-top:3rem;
}

figcaption {
  margin-bottom:1rem;
}

code {
  background:#444;
  padding:2px 4px;
  border-radius:4px;
  white-space:nowrap;
}

a {
  color:#fff;
  text-decoration:none;
  box-shadow:0 2px #eee;
}

a:hover {
color: pink;
  box-shadow:0 2px pink;
}

hr {
  height:1px;
  border:0;
  background:#fff;
}

img {
margin:0;
}


.background-image-with-warner-bros {
    height:500px;
  width:500px;
background-image:radial-gradient(70% 70% at 50% 50%, rgba(149, 8, 17, 0) 27%, rgba(161, 18, 41, 0.25) 26.75%, rgba(172, 27, 59, 0.5) 26.5%, #c12e5b 26%, #b9254d 29%, #b11c3f 32%, #a00818 38%, #970513 38.75%, #8f030d 39.5%, #7e0002 41%, #8c0914 40.75%, #9a1423 40.5%, #b42a3e 40%, #9a1c2d 43.75%, #7f0f1e 47.5%, #4a0005 55%, #61030c 55%, #780916 55%, #a71c2b 55%, #851021 59%, #640618 63%, #210004 71%, #3f000a 71.25%, #59010e 71.5%, #90030b 72%, #720114 76%, #560113 80%, #190004 88%, #32000a 88%, #42000d 88%, #650106 88%, #570107 91%, #490007 94%, #2c0004 100%),url(https://res.cloudinary.com/jbbb/image/upload/c_scale,q_auto:eco,w_500/v1625695338/dog_cdtbxh.jpg);
}