Make Blurred Background Using CSS

by Posted on

If you have added awesome fancy background on your website, but if you place some text on background then text will not be proper visible, So if you want to place fancy background on text on it with clear visibility then this code snippet is for you this makes background Blurred any area of your website you want to add some text pictures.
Blurred Background Using CSS

HTML

Here is the html code which display text on background

 
<div id="box1" class="box blurred-bg tinted">
  <div class="content">
    <h1>Blurred Background</h1>
        <h2>By <a href="http://www.iamrohit.in" rel="follow" target="_blank">Rohit Kumar</a></h2>
        Drag this box to move around
 
  </div>
</div>

CSS

The main work of CSS in this example of setting fancy background and making it blurred for selected area.

@import "compass/css3";
 
@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
 
$normal-img:"https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg";
$blurred-img:"https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg";
 
body{
    background-image:url($normal-img);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
 
    font-family:Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
}
.blurred-bg{
 
    background-image:url($blurred-img);
    background-repeat:no-repeat;
    @include background-size(cover);
    background-attachment: fixed;
 
    &.tinted{
        @include background-image(linear-gradient(0deg, rgba(255,255,255,.2),rgba(255,255,255,.2)),url($blurred-img));
    }
    &.shaded{
        @include background-image(linear-gradient(0deg, rgba(0,0,0,.2),rgba(0,0,0,.2)),url($blurred-img));
    }
}
.box{
    width:500px;
    height:300px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
    position:absolute;
    border-radius:5px;
    @include box-shadow(0 20px 30px rgba(0,0,0,.6));
    border:1px solid rgba(255,255,255,.3);
    padding:20px;
    text-align: center;
    @include box-sizing(border-box);
    text-shadow:0 1px 1px rgba(0,0,0,.4);
  display: flex;
  transition: box-shadow .3s ease;
 
    &:active{
    cursor:move;
    @include box-shadow(0 20px 50px rgba(0,0,0,.9));
  }
 
  .content{
    margin: auto;
  }
}
h1,h2,a,p{
    color:white;
    font-weight:100;
 
    .tinted &{
        color:black;
        text-shadow:0 1px 1px rgba(255,255,255,.2);
    }
}
h2{ font-size: 14px }
p{ 
  margin: 20px;
  &.related{
    text-transform: uppercase;
    font-weight: 700;
    color: #444;
 
    a{
      font-weight: 700;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}
 
.iklan{
  position: fixed;
  bottom: 0;
  right: 0;
  background: white;
  width: 200px;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
  p{
    margin: 0 0 15px;
    line-height: 1.4;
    color: #333;
  }
 
  a{
    background-color: #ff4757;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 14px;
  }
}

JS

Only for this example, auther has created a drag-able section of content written on blurred section. This is totally optional if you don’t want to drag area.

$(function() {
    $( ".box" ).draggable();
});

See live demo and download source code.

DEMO

This awesome script developed by ariona, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin