CODEWITHSUNDEEP
htmlcsssvgcss-filters
John McLane
John McLane

Reputation: 103

CSS Filter blur and contrast for gooey effect

In this example the gooey effect doesn't seem to work with css filter. I used filter: blur(10px) contrast(30); but it only shows blur effect. I wanted result to be a gooey.

Upvotes: 5

Views: 2036

Answers (2)

enxaneta
enxaneta

Reputation: 33054

This is how it can be done with: filter: blur(10px) contrast(30);. You need to add background:white; to the container. Also you'll need some extra space between the limit of the container and the circles so I've added padding:100px;

body {
  width: 100vw; height: 100vh;
  display: grid;
  place-items: center;
}
.container {
  display: flex;
  flex-direction: column;
  background:white;
  padding:100px;
  filter: blur(15px) contrast(30);  
}

.circle {
  width: 100px; height: 100px;
  background-color: red;
  /* border-radius: 100%;*/
}

.circle-1 {
  border-radius: 50%;
  /* top: 50px;
     border: 5px solid black;*/
  transform: translateY(20px);
}
.circle-2 {
 border-radius: 95% 5% 70% 30% / 52% 30% 70% 48% ;
   transform: rotateY(-180deg);
}
<div class="container">
  <div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>

Please read the article: The Gooey Effect - Lucas Bebber

Upvotes: 5

SoroushOwji
SoroushOwji

Reputation: 123

Well, the page you linked isn't valid anymore but if I have guessed right you should use a transparent background color! something like background-image: <image>, rgba(<color>, <transparency>);

Upvotes: 0

Related Questions