Editor: frooty effect

2026-03-01T18:48:13Z

frooty effect

New page

.content {
position: relative;
}

.effect h2 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}

.effect{
color: transparent;
}

.effect {
color: #FFA500;
animation: animate 4s ease-in-out infinite;
}
/*This is the animation for the juice effect If you want to edit it open up the froot template and hit inspect element-> style editor -> style sheet 4. so you can edit it and test in real time
before publishing */
@keyframes animate {

0%,
100% { /* xposition%,yposition. the more you add here the more realistic the liquid effect will look/reduce sharp edges. However to much may cause performance issues for phonegods*/
clip-path:polygon(0%5%,16%10%,33%5%,54%9%,70%7%,84%6.2%,100%7%,100%100%,0%100%)
}
50% { /*second animation. the template will cycle between the one on the top and the one on the bottom forever creating the illusion of liquid. may add more than just 2 states*/
clip-path:polygon(0%8%,16%7%,34%11.6%,51%11.2%,67%12.0%,84%12.5%,100%10.6%,100%100%,0%100%)
}
}

Template:Frootyeffect.css - Revision history

Editor: frooty effect