Glassmorphism Animation
Add to favorites
Bring your frosted glass design to life with beautiful animations
Youtube Link
You can also watch the video on Youtube here.
CodeSandbox link
You can find the initial code here and the final code here.
Glassmorphism
A glassmorphic UI is characterized by highlighting light or dark objects over color backgrounds. Background-blur is placed on the objects to allow the background to shine through - creating the illusion of frosted glass.
Blob Shape
The goal of this tutorial is to teach you how to animate an organic-looking, smooth shape: the blob.
const Blob = styled.div`
position: absolute;
width: 500px;
height: 500px;
background: linear-gradient(
180deg,
rgba(47, 184, 255, 0.42) 31.77%,
#9eecd9 100%
);
mix-blend-mode: color-dodge;
border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
`;Keyframes
The shape will be moved using keyframe animation. Let's change the border radius to change the form when it moves.
const move = keyframes`
from {
transform: translate(0px, -50px) rotate(-90deg);
border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
}
to {
transform: translate(500px, 100px) rotate(-10deg);
border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
}
`;Animate
To apply the animation, we need to use the animate property on the blob.
animation: ${move} 25s infinite alternate;Hover
From there, we can add additional features, such as hover animations and changing other properties. Let's add a transition to make the animation smoother.
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
:hover {
width: 520px;
height: 520px;
filter: blur(30px);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
inset 100px 100px 0 0px #fa709a, inset 200px 200px 0 0px #784ba0,
inset 300px 300px 0 0px #2b86c5;
}Negative Spacing
We have a lot of negative space left, so we can add a second to fill it. Besides changing the translation values, we can also change the gradient of the second blob.
const move2 = keyframes`
from {
transform: translate(-200px, 0px) rotate(-90deg);
border-radius: 51% 49% 58% 42% / 34% 78% 22% 66%;
}
to {
transform: translate(400px, 100px) rotate(-120deg);
border-radius: 22% 78% 73% 27% / 67% 31% 69% 33% ;
}
`;const Blob2 = styled(Blob)`
background: linear-gradient(
180deg,
rgba(186, 117, 255, 0.49) 26.56%,
#3913b8 100%
);
animation: ${move2} 30s infinite alternate;
`;Learn with videos and source files. Available to Pro subscribers only.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Assets
Videos
Subtitles
1
Styled Components
React library for styling your components
5:36
2
Grid Layout
The best way to create a beautiful and responsive layout
16:09
3
Media Query
Introduction to Responsive Web Design
8:24
4
Keyframes
Create beautiful animations in CSS using keyframes
12:34
5
Glassmorphism Animation
Bring your frosted glass design to life with beautiful animations
14:21
6
CSS line animations
Learn how to create a CSS line animation
15:47
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs
