CSS filter is a quick and convenient way to apply effects like blur brightness
and contrast to any HTML element but do you know that it can be also used to
create awesome effects like these examples in this video we are going to
talk about 5 stunning CSS filter tricks that you might not know ready
let's check it out
this example is a combination of CSS contrast filter and blur the concept is
very simple when you blur two objects to a certain amount they will starting to
overlapping each other and that's when we add contrast to counter the blur and
that's it both of them will appear to be merged with each other in a sticky gooey
way so if we combine this trick with color border-radius and rotation
animation you achieve this stunning effects like these examples on codepen
you can also animate the blur filter itself to create a gooey text animation
like this one when you increase the letter spacing and blur to the point
that the letters are not overlapping the contrast will make them disappear and
that's a trick number one next trick is again simple but awesome
you can simply an image the brightness of the element which can be used to
simulate the light effect like these examples without having to bother with
WebGL and this example used linear gradient background and blur filter to
create a light beam then use brightness filter to create a light effect on these logos
or you can combine it with opacity animations to create movie style quote
like this example the one above is a combination of brightness filter of
background and text opacity similar to bottom one but use sepia filter instead
of brightness when you want to create a hover effect you highlight a certain
area you can use blur and saturation filters to remove the color and blur the
non-essential part this will bring the attention to the highlight item which
works really well with menu or you can create a depth of field effect on your
website like this example I made a tutorial about this previously you can
find a link at the description box below if you watch my previous video you knew
this trick already you can create a custom SVG filter and apply it with CSS
future using URL this allows us to create many stunning effects using SVG
capabilities for example you can use SVG turbulence filter to create realistic
water without using JavaScript at all or create a heat wave effect animating
pattern squiggly text or use Gaussian blur to create a smoke effect like this
the last trick is pretty cool and genius remember the first trick that we use to
create a gooey effect this trick use it to combine with typography there are some
interesting characters in Arial font so this example use it to create patterns
and switch between them using CSS animation then add blur and contrast
filter which resulted in glitch effect
but the catch is you can only use colors that are not too contrast like pink and
purple or a dark blue and indigo and that's all for this video hope you guys
enjoy if you want to see more development tips and tutorials subscribe
this channel to stay tuned thanks for watching see you next time
bye