CODEWITHSUNDEEP
css
rpsep2
rpsep2

Reputation: 3111

is there css to fade edges of a div?

I want to create a modal popup (for mobile) which will display a success message.

I am currently adding an opaque back overlay to the entire content, using

.overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.4);
}

but i was wondering if there is a way to only fade/ overlay the edges of the screen? like this but in reverse:

enter image description here

Upvotes: 1

Views: 5195

Answers (1)

Shajed Evan
Shajed Evan

Reputation: 523

There are several ways of doing such faded style with CSS3. But it's better to apply a combination of both Gradient Border and Inset Box Shadow. You may get a much better idea on this Codepen Example

Upvotes: 2

Related Questions