hello and welcome to red stapler channel
in this tutorial I'm going to show you
how to create a CSS bokeh effect with
moving animation in just a few minutes
ready let's check it out
the key concept of this tutorial is very
simple create circle color div elements
then used various CSS box shadow radius
and rotation to create the animation but
manually coding CSS style and
animation for each div is quite
impractical so in this tutorial I'm
going to code in SCSS then use the
compiler to generate final CSS
let's start with HTML we only need a
wrapper and particle divs you can add as
many divs as you like
now the SCSS file first I'm going to
define the size and position and
background color of the wrapper div
we also need to add overflow:hidden to
hide any off-screen bokeh particles
and next we are going to define constant
variables for this project first the
number of the particles this should be
equal to the number of the div elements
you have next the particle size as big
as you like next to the base opacity
we'll add this with random value later
and next base brightness again we'll add
this with random value later
and the colorset these are colors that
will be used to generate the particles
randomly I suggest using three but you
can add more if needed
now for each div set the position to
absolute and border-radius to 50% to
create a circle
then create a loop to iterate through
each div
here we are going to start adding
randomized value first I'm going to
create a randomized size which is the
base size plus the random value then use
it to set width and height
next set top left to random value
between zero to 100% boundary
next is color we are going to pick one
from the colorset using nth function
and random value within the colorset
length
the opacity same as above we will add
base with some random value
now the box-shadow this will be a bit
tricky instead of using background color
we are going to use the box shadow to
represent the entire particle so we need
to offset the shadow with a value a bit
larger than the particle size
then use random value for blur radius
and set the shadow color using currentcolor
and finally add a brightness future with
randomized value
here is what it looks like so far
now let's work on the animation create a
linear infinite animation to rotate the
depth 360 degrees
the trick is we need to random a
transform origin
so the particles are rotating from
various point and appears to look like
they are actually moving
and finally set the animation duration
this will be the movement speed so I'm
going to add a random value as well
we are all set let's see the result
so that's all for this tutorial hope you
guys enjoy if you are looking for more
tutorial like this check out our Channel
videos or subscribe to stay with us for
more updates thanks for watching and see
you next time bye
