SCSS
@function randomBokeh($size: 100, $spread: 3) {
$randomColor: rgba(220, random()*255 + 80, random()*155 + 200, random());
$singleBokeh: radial-gradient(random()*$size+px at random()*$size*$spread+px random()*$size*$spread+px, $randomColor, $randomColor 96%, transparent);
@return $singleBokeh;
}
@function gimmeBokehs($howMany: 10, $size: 100, $spread: 3) {
$bgList: ();
@for $i from 1 through $howMany {
$bgList: append($bgList, randomBokeh($size, $spread), comma);
}
@return $bgList;
}
body {
position: relative;
width: 100vw; height: 100vh;
overflow: hidden;
background: url('http://wallpaperbook.net/wp-content/uploads/2014/10/beautiful-girl-portrait-512769.jpg');
background-size: cover;
}
.bokehs {
width: 100vw;
height: 100vh;
margin: 0 auto;
mix-blend-mode: screen;
filter: sepia(.6) opacity(.3);
background: gimmeBokehs(120, 60, 20);
}
