Looking to add a touch of dynamism and fluidity to your web design? Look no further than the power of CSS liquid effects! This collection curates over 20 captivating examples, showcasing the versatility of CSS in creating stunning liquid animations. From rippling thermostats to interactive toggles, prepare to be impressed by the creativity and technical prowess on display. Each effect comes with a live demo and downloadable code, allowing you to explore and implement these techniques in your own projects. Get ready to unleash the power of liquid and elevate your web design to the next level!
Animated Liquid Thermostat with Realistic Details
This code creates a cool, animated thermostat that looks like it’s filled with rippling liquid. It uses fancy CSS features for smooth animation and realistic details like tiny bubbles (if your browser supports it). The liquid uses a special effect that makes it look like it’s moving and has a subtle wave. You can also slide a bar up and down to adjust the “liquid level” which changes the displayed temperature. The code even includes a background noise texture for a little extra touch.
Animated Liquid Toggle with Grow Effect
A neat, animated toggle switch that looks like a blob of liquid. When you click it, the whole button rotates and a background element inside it expands with a cool “grow” effect. There are different styles for a light theme and a disabled state (which appears faded). The code also includes special adjustments for users who prefer reduced motion (removes animations) and for printing (shows the default checkbox).
Animated Button with Liquid Ripple Effect
A clickable button with a cool liquid ripple effect that animates on hover. The button text sits on top of a blue background that expands and rotates when you mouse over it. The button itself also gets a subtle shadow.
Smooth Liquid Checkbox Toggle
A cool, animated checkbox that looks like a smooth, liquid toggle. When you click it, the whole button and a background element seem to squish and slide to the other side. There are different styles included for a light theme and a disabled state (which appears faded). The code also includes special adjustments for printing and for users who prefer reduced motion.
Author
Thomas RONCIN
January 19, 2022
About a code
Liquid Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
