CODEWITHSUNDEEP
htmlcssreactjssass
H.Sdq
H.Sdq

Reputation: 857

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

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.

Upvotes: 5

Views: 5190

Answers (2)

Amir Rezvani
Amir Rezvani

Reputation: 1504

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>

Upvotes: 5

Ms.Tamil
Ms.Tamil

Reputation: 354

Add

filter: blur(1px);

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

Fiddle here

Upvotes: 2

Related Questions