How to implement this kind of blur effect?


Tags: javascript,jquery,css

Problem :

enter image description here

As you can see , the background of the pop up box is in relatively black color and blur. How can i achieve the similar effect? Is the background blur effect use css to written or it is just a plain image?

Thank you.



Solution :

.overlay
{
    background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7))
}

Source: Inspecting the element

Edit:

Here's a link to a cross browser version


    CSS Howto..

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to Access A To String Function with PHP?

    How to position a button to be always a certain distance from the screen in css? [closed]

    how to make this “div” always visible to users

    How to horizontally center text in bootstrap button?

    how to create css background effect in extjs4.0 application(on selection)

    How to make a smooth transition for css controlled by jQuery?

    How to add external css into html

    WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    css How can I make the page body stay the same size even if I add element to it?

    page breaks and css - how to skip last page?

    How to add css in post? [closed]

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How do I apply a CSS to a clutter stage?

    How to make CSS Multi Column layout over html to move between the columns on user click

    How to make rotating shape look thick?

    CSS: How to create buttons with reflected shine similar to iOS icons?

    How to prevent CSS table row expanding to parent height

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How to make this loading animation?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    how to specify different css for ie

    How to manage text breaks in span using js, css or anything else

    How to keep grid width if colums are switched in column menu

    How to keep DIV from overlapping?

    how to apply css to a link within a particular div only?

    How to align 3 divs with CSS retaining relative position while scaling window

    JavaScript how to get this html to read this css and organise my script into the table

    how to make css nested colors in one div bacground