How To Create Glass Effect In HTML And CSS | Glassmorphism | letsbug

     Today in this article we are trying something that we have not done in a while that is we are creating a glass like effect in html and css or creating a card in css with glassmorphism. This is going to be a very simple project but we can use this effect in our many different project as per our needs. 

    So to get started we just need a code editor and a browser to view it and nothing more. But you should know a little bit of HTML and CSS to get started. So here are the steps.

Glassmorphism Preview

Glassmorphism in CSS | letsbug

Glassmorphism in CSS, Glass Effect in Css, letsbug

Step one :   Setup a HTML document

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass Effect</title>

</head>
<body>
   
</body>
</html>

Step Two : Add HTML elements

<section>
    <h1>Glass Effect</h1>
    <article>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, praesentium. Rem fugiat numquam nihil, saepe minus sequi aperiam? Corrupti, fugiat.</p>
    </article>
</section>

Step Three : Add Glassmorphism Stylings 

<style>
    body {
        background-image:url('https:source.unsplash.com/random/400x400/?beach');
        background-size: cover;
        background-repeat: no-repeat;
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        height:80vh;
        display: grid;
        place-items: center;
    }
    section{
        background: inherit;
        width:70%;
        color:white;
        padding:1rem;
        border-radius: .3rem;
        filter: drop-shadow(0 0 .5rem rgba(0,0,0,.5));
        border:none;
        position:relative;
        z-index: 1;
    }
    section::after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius: .3rem;
        z-index:-1;
        filter: blur(5px);
        background: inherit;

    }
    section h1{
        font-size: 1.5rem;
        font-weight: lighter;
        color:white;
    }
    section article{
        color:white;
        letter-spacing: 1px;
    }

</style>

    As you saw creating a Glassmorphism effect is very easy. But let me clear one thing the styling that you see in the styles tag. All of that is not required to make this glass effect but i have use them to make is more beautiful. Main styling is in the section tag and section tags after pseudo element.

Thankyou, ☺


Comments

Post a Comment

Categories

A Triumph of Surgery Agriculture Array Array Left Rotation Auto Completing Input Basic Question Answers BBA.CA BCA Beehive Big Data
Big Data Analytics Binary Search Binary Search Tree Binary To Decimal binary tree Breadth First Search Bubble sort C Programming c++ Chemical Reaction and equation class 10 class 10th Class 9 Climate Complex Numbers computer network counting sort CSS Cyber Offenses Cyber Security Cyberstalking Data Science Data Structures Decimal To Binary Development diamond pattern Digital Marketing dust of snow Economics Economics Lesson 4 Email Validation English fire and ice Food Security in India Footprints Without feet Forest And Wildlife Resources game Geography Geography lesson 6 glassmorphism Glossary Graph HackerRank Solution hindi HTML image previewer India-Size And Location Insertion Sort Internet Network Status Interview Questions Introduction to cyber crime and cyber security IT javascript tricks json to CSV converter lesson 2 lesson 1 lesson 2 Lesson 3 Lesson 6 lesson 7 Life lines of National Economy life processes Linear Search Linked List lowest common ancestor Machine Learning MCQs median in array Merge sort min and max of two numbers Moment Money and Credit My Childhood Natural Vegetation and Wildlife NCERT Network connectivity devices Network Models Network Security No Men Are foreign Node.js operator overloading P5.js PHP Physical features of India Population Prime Numbers python Quick sort R language Rain on the roof Regular Expression Resources and development reversing array saakhi science Searching Algorithm Selection sort Social Media Marketing social science Software Engineering Software Testing Sorting Algorithm Stacks staircase pattern System Concepts Text Recognition The last Leaf time converter Time Passed From A Date Todo List App Tree Trending Technologies Understanding Economic Development username and password video player Visualization water resources Wired And Wireless LAN साखी
Show more

Popular Posts

Big Data MCQs(multiple choice questions) with answers - letsbug

     In this article we have 30  MCQs(multiple choice questions) on Big Data with answers. 1. According to analysts, for what can traditional IT system provide a foundation when they're integrated with big data technologies like Hadoop?  Big data management and data mining  Data warehousing and business intelligence  Management and business  Collecting and storing unstructured data Answer: 1 2. What are the main components of Big Data? MapReduce HDFS YARN All of these     Answer: 4 3. What are the different features of Big Data Analytics?  Open-Source  Scalability  Data Recovery  All of the above Answer: 4 4. According to analysts, for what can traditional IT systems provide a foundation when they're integrated with big data technologies like Hadoop? Big data management and data mining  Data warehousing and business intelligence  Management of Hadoop clusters  Collecting and storing unstructured data Answer: 2 5. What are the four V's of Big Data?. Volume Velocity Variety
Read More »

Digital Marketing MCQ(Multiple Choice Questions) with Answers | part 1 | letsbug

      Digital marketing is a subset of marketing that is used to promote a brand or product using one are more electronic technologies. The goal is to influence target consumers in taking action .     Digital marketing is the term used for the targeted, measurable, and interactive marketing of products or services using digital technologies to reach the viewers, turn them into customers, and retain them.       Digital marketing is on the rise and here are some Digital marketing MCQs to get you running in this field on new age media. 1. Which of the following describes E-commerce  Doing Business electronically   Doing business  Sale of goods   All of the above Answer: 1 : Doing Business electronically 2. Which of the following is not the type of E-commerce. B2C E2E B2B C2C  Answer: 2 : B2C 3. Which of the following is the benefit of E-commerce. Reduced Prices Global marketplace Any time access All of the above   Answer: 4 : All of the above 4. Which of the following is not the adva
Read More »

Software Engineering MCQs questions with answers - letsbug

Introduction to Software Engineering MCQs 2021 for BBA.CA, BCA and B.Tech students 1. What is a Software? Software is set of programs. Software is documentation and configuration of data. Software is set of programs, documentation & configuration of data None of the above Answer: 3 2. Which of  the following is not the characteristic of Software? Software does not wear out Software is flexible Software is not manufactured Software is always correct Answer: 4 3. Layers in layered technology of software are ...... Process, Methods, Tools Internal, External, Central Inner, Outer, Middle Procedure, Methods, Task Answer: 1 4. Which is not McCall's software quality factor? Product Revision Product Transition Product Operation Product Generation Answer: 4 5. Which is characteristic of software process? Understanding Visibility Reliability All of the above Answer: 4 6. Which of the five Generic Software Engineering Framework Activites? Communication, Planning, Modelling, construction,
Read More »