Creative Use of CSS Filters

CSS Lava Lamp
.circle{
position: absolute;
width: 20vw;
height: 20vw;
top: 50%;
left: 50%;
margin-left: -10vw;
margin-top: -10vw;
background-color: darkred;
border-radius: 100%;
filter: blur(1vw);
}
.circle{
position: absolute;
width: 20vw;
height: 20vw;
top: 50%;
left: 50%;
margin-left: -10vw;
margin-top: -10vw;
background-color: darkred;
border-radius: 100%;
overflow: hidden;
}
.circle div{
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background-color: white;
filter: blur(2vw);
}
Lava Lamp effect in After Effects
Lava Lamp effect in Photoshop
.circle{
position: absolute;
width: 20vw;
height: 20vw;
top: 50%;
left: 50%;
margin-left: -10vw;
margin-top: -10vw;
background-color: darkred;
border-radius: 100%;
overflow: hidden;
filter: blur(.2vw) contrast(500%) brightness(1500%) hue-rotate(30deg);
}
.circle div{
position: absolute;
width: 30%;
height: 30%;
top: 50%;
left: 50%;
background-color: white;
filter: blur(2vw) contrast(50000%) brightness(100%);
}
.circle div:nth-of-type(2){
top: 22%;
left: 22%;
}
.circle{
position: absolute;
width: 20vw;
height: 20vw;
top: 50%;
left: 50%;
margin-left: -10vw;
margin-top: -10vw;
background-color: darkred;
border-radius: 100%;
overflow: hidden;
filter: blur(.2vw) contrast(500%) brightness(1500%) hue-rotate(30deg);
}
.circle div{
position: absolute;
width: 30%;
height: 30%;
top: 50%;
left: 50%;
background-color: lightpink;
filter: blur(2vw) contrast(50000%) brightness(100%);
}
.circle div:nth-of-type(2){
top: 22%;
left: 22%;
margin-left: 20vw;
animation-name: blobAnim;
animation-duration: 5000ms;
animation-timing-function: ease-in-out;
animation-play-state: running;
animation-iteration-count: infinite;
}
@keyframes blobAnim{
0%{margin-left: -20vw};
100%{margin-left: 20vw};
}
The result of our Code

--

--

--

UI/UX Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Docker Desktop 2.2, WSL 2, Drupal, Symfony

Let’s Stop Learned Helplessness in Software Engineering

Working on AWS Glue locally with Jupyter Notebook

Flutter current route active tracking debug

Sol on Akash for Dummies

Unhandled exceptions in asynchronous .net application

My Experience of Hacktoberfest’21

Incident Management — Automated

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adir SL

Adir SL

UI/UX Designer

More from Medium

Create a Landing Page Design using CSS framework: Sass Part 2.

Bootstrap 5 — Adding it to your page

The CSS :has() selector

Color Extraction Tools for Front End Web Development