How to Add Blur, Grayscale, and Brightness (Using Custom CSS)

Hello everyone!

In this video, I show you how to add some filter effects to your ClickFunnels elements using some custom CSS, in particular grayscale, blur, and brightness effects.

These are just some additional effects you can add to your library of knowledge and use whenever you see the need to do so! Let’s briefly go over each of these in turn.

– Blur: to add this effect, you just need to write the following into your custom CSS: ‘#element ID{filter:blur(5px);} to blur that particular element by a little bit, 5 pixels to be exact. Just like in our video on hovering, you can add a cool hover effect to this and make the element LOSE it’s blur upon hover, perhaps revealing something you wanted to hide at first, but let the user know that it’s there in the first place.

– Grayscale: to add this effect, you just need to write the following into your custom CSS: ‘#element ID{filter:grayscale(100%);}’ to make your element completely black and white. You can play around with the numbers from 0 to 100%, but if you want to make a nice historical black and white only effect, you can do so with this declaration!

– Brightness: to add this effect, you just need to write the following into your custom CSS: ‘#element ID{filter:brightness(50%);}’ to make your element reduce the brightness by 50%. Unlike grayscale, where the numbers range only from 0 to 100%, you can go anywhere from 0 to 1000% with brightness, with 100% being the default and normal-looking element. If you decrease brightness to 0%, your element will be completely black. If you make it anything over 100%, brightness will be added up to a certain point.

If you want to add all these together at the same time, just do exactly what we’ve been doing in our transitions video – just add all these properties together in one line. So if I want to add blur, grayscale, AND brightness, I would type the following into my custom CSS: ‘#element ID{filter:blur(5px) grayscale(100%) brightness(50%);}’, which would make my element blur by 5 pixels, make it completely black and white, and reduce brightness by 50%.

That’s it!

Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

One Reply to “How to Add Blur, Grayscale, and Brightness (Using Custom CSS)”

  1. Pingback: How to Add Animations (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply