This is achieved by the background-clip property. Pay attention to how the edges are cut off beautifully. After adding this property and some padding to our credit-card element, we can keep the blurry area at the center of the credit-card element while keeping all edges clear and without any blurry effect. This property defies how far the background (color or image) should extend within an element. In contrast, blur(0) will have no blur effect at all. The higher the pixel, the more blurry it will be. With this property you can specify how blurry you want to make the element.
The key css properties that makes the element has glassmorphism effect are the following two properties: background-filter: blur(20px) Later all elements on the credit card will live inside the container.īox-shadow: 1px 1px 1px rgba(218, 128, 36, 0.03) We set an orange color as background and center everything within at the middle using flex-box Credit Card Containerįor the credit card container, we will create a div element inside the bg div element with a class called “credit-card”.
When you use glassmorphism in your design, you must place it before a colorful background or have an image in order to contrast with the glassmorphism element. Let us start by creating the orange background. The final output will look like below Glassmorphism Credit Card Colorful Background In this tutorial we will walk you through the process of creating a glassmorphism credit card using only CSS. Glassmorphism allows you to create HTML elements that look like frosted glass and have a blurry transparent effect.
As 2020 comes to an end, new UI trends for 2021 starts to appear and one of the coolest trends for 2021 is the Glassmorphism.
0 kommentar(er)
