How can I Add Shapes And Blur to the Background-CodePudding

I want to add two circles to the left and right sides and also want to add a background blur like this image can anyone teach me how can I do like this

I want to add two circles on both sides with a blur like this image Want Like This

CodePudding user response：

You can use svg background. you can't add filter css to background. You can also use a pseudo-element instead of a background.

html

<div >
  <div >
    Module
  </div>
</div>

css

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: blur(4px);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

CodePudding user response：

Can you please explain briefly? about your issue where you get stuck.

Like in video editing or photoshop or in HTML/CSS like this