How to create a slider with CSS Background Image Blur (without blurry edges)

Update: This has been rather popular and people have requested I shared the full screen and an example, here is a video of an example where the script was used:

I am not going to write a long story here… I will simply get to the solution:

  1. In this case, I used the BXSlider to create the hero slider:
  2. There is nothing fancy in the way the slider is implemented or how it works. You can follow the documentation on how to use BxSlider and also check out one of the remaining implementations here:
  3. The CSS used is as follows:


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store