blur the background image while keeping the foreground normal

this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry

HTML

<div class='demo-bg flex-center'>
  <div class='demo-bg-inner'>some inner text</div>
</div>

CSS

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.demo-bg {
  position: relative;
  width:100%;
  height:400px;  
}
.demo-bg::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background-image: url(https://kruxor.com/images/pexels-photo-546819.jpeg);
  filter: blur(10px);
}
.demo-bg-inner {
  position: relative;
  color:#ce4d4d;
  font-size:40px;
  font-weight:bold;
}
some inner text

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 164 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Most people can do absolutely awe-inspiring things,” he said. “Sometimes they just need a little nudge.
Unknown