1

I have a situation here. I have a div which contains a svg graphics. inside that div I also have some text. By default the svg looks a little distorted. So I used filter:blur() css to make it a little smooth. But the problem is everything over that div including text become blur too. Here is my code:

#back-clip{
  height: 700px;
  background-color:rgb(29, 62, 222); /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, rgb(29, 62, 222) , rgb(3, 218, 246));
-webkit-clip-path: polygon(-2px 421px,814px 356px,962px 419px,1920px -2px,-2px -2px);
clip-path: url("#clipPolygon");
filter: blur(1px);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid" id="back-clip">
  <div class="row">
    <div class="col-12">
      <svg width="0" height="0">
        <clipPath id="clipPolygon">
          <polygon points="0 700,1219 553,1920 700,1920 0,-2 -2">
          </polygon>
        </clipPath>
      </svg>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="text-light">
        <h1>Welcome</h1>
      </div>
    </div>
  </div>
</div>
  </body>
 </html>
Tariqul Islam
  • 347
  • 4
  • 18
  • 1
    @TemaniAfif ... Yes, saw this. But I'm trying to avoid position:fixed or position:absolute... any thought on that? – Tariqul Islam Apr 20 '19 at 11:59
  • 3
    why you want to avoid absolute? it's the logical way to achieve this since it's the only way to make an element behave as a background layer – Temani Afif Apr 20 '19 at 12:01
  • You can't filter just the background of an element. You will need to make the text a separate element. Or give up on the idea of blurring the background. – Paul LeBeau Apr 22 '19 at 06:55

0 Answers0