How to get a background frosted glass effect without using background image

Question

I'm trying to make a modal window in react with a blured backdrop. What I'm trying to achieve is to blur the backdrop content and Not bluring the background image since there's no image just the content behind the modal window. So far I've come across these solutions frosting glass, frosting glass and glass effect but all of them use background image to apply the blur effect but that's not what I'm looking for.

react component:

import React from "react";
import './index.scss';




const Modal = ({ handleClose, show, children }) => {
    return (
            <div class="modal display-block">
               <div class="modal-container">
                  <section class="modal-main">
                      <div class="row no-gutters header">
                          <div class="col">
                             <i class="fa fa-lg fa-close"></i>
                          </div>
                      </div>
                      <div class="row no-gutters content"></div>
                  </section>
               </div>
           </div>
    );
};

export default Modal;

css:

@import 'yelStrap/_variables.scss';




.modal {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
  }

.modal-container {
  background: inherit;
  position: absolute;
  top: 50px;
  right: 250px;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

.modal-container::before{
  content: '';
  width: 100% ;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; 
  background-color: rgba(255, 255, 255, 0.5);
  filter: blur(6px);
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
    -ms-filter: blur(6px);
 }

.modal-main {
  position: relative;
  background: white;
  width: 90%;
  min-height: 352px;
  top: 10%;
  left: 0px;
  right: calc(10% / 2);
  padding: 10px;
  background-color: $white;
  border-radius: 5px;
  box-shadow: 0 0 12px 2px rgba(20, 150, 255, 0.15);
  z-index: $zindex-modal;
}

.fa-close {
  color: $water-disabled;
  cursor: pointer;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

when I add background image to the .modal-container::before it works but with background color it doesn't!

Any help is appreciated, thanks.

I think if you want to blur the text then the blur has to be on the div itself: http://jsfiddle.net/ayhj9vb0/2285/ - it applies the blur to the actual element rather than what is behind it - http://jsfiddle.net/ayhj9vb0/2286/ — Pete, Dec 04 '18 at 12:36

Amir Rezvani · Accepted Answer · 2018-12-17T09:04:48.817

there you go. just see the result. in fact i suggesting to keep the modal next to the contents that you want to be blurred instead of keep it inside the contents.

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  width: 100%;
  height: 100%; 
  
}

.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="bg-image">
asdaidnasijbadkjhvbafvjhabdf vkjhabdfvk ahjbdfkv hjbfdkv s
</div>

<div class="bg-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sit dolores nam tempore dolore dicta quae fugiat assumenda, obcaecati, quibusdam. Officiis autem perspiciatis pariatur, beatae possimus, nulla nobis adipisci ipsum.</p>
</div>

</body>
</html>

score 2 · Answer 2 · answered Dec 04 '18 at 12:43

2

Add

filter: blur(1px);

Increasing the blur px will increase the blurriness of the background.

Fiddle here

answered Dec 04 '18 at 12:43

Ms.Tamil

350
1
14

1

Thanks for your consideration but the problem is that my modal window (component) is loaded inside the content of the page and if I want to blur the content the modal window gets blurred as well! – H.Sdq Dec 04 '18 at 12:48

How to get a background frosted glass effect without using background image

2 Answers2