Glassmorphism Credit Card with Pure CSS

Glassmorphism Credit Card with Pure CSS

Introduction

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. Glassmorphism allows you to create HTML elements that look like frosted glass and have a blurry transparent effect. In this tutorial we will walk you through the process of creating a glassmorphism credit card using only CSS.

The final output will look like below

Glassmorphism Credit Card
Glassmorphism Credit Card

Colorful Background

Let us start by creating the orange background. 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.

HTML

CSS

The CSS for the bg class is very simple. We set an orange color as background and center everything within at the middle using flex-box;

Credit Card Container

For the credit card container, we will create a div element inside the bg div element with a class called “credit-card”. Later all elements on the credit card will live inside the container.

HTML

CSS

The key css properties that makes the element has glassmorphism effect are the following two properties:

background-filter: blur(20px)

With this property you can specify how blurry you want to make the element. The higher the pixel, the more blurry it will be. In contrast, blur(0) will have no blur effect at all.

background-clip: padding-box

This property defies how far the background (color or image) should extend within an element. 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.

Initial Credit Card Element
Initial Credit Card Element

Pay attention to how the edges are cut off beautifully. This is achieved by the background-clip property.

Add Remaining Credit Card Elements

HTML

CSS

In order to simulate 3D texts on credit cards, we added text-shadow to all our text elements.

CSS Credit Card
CSS Credit Card

Finishing touches

To really make the glassmorphism effect stand out, let us place some decorations at the border of the credit card to demonstrate the effect. We will add the following two new elements to the HTML below the credit-card div element. And to make them always be at the edge of the credit card, we’ll add a parent div that wrap credit card and these new decorators.

HTML

CSS

End Result

Glassmorphism Credit Card
Glassmorphism Credit Card

Complete listing

HTML

CSS

You can find the demo of this tutorial on CodePen:

Original Post:

https://simpleweblearning.com/glassmorphism-credit-card-with-pure-css

--

--

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