The latest articles on DEV Community by Rahul Singh (@rahulkuulsingh). https://dev.to/rahulkuulsingh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601293%2Fec79eaad-ea8c-47b1-a886-4eb7b0945ea7.png https://dev.to/rahulkuulsingh en Rahul Singh Sun, 21 Mar 2021 23:43:58 +0000 https://dev.to/rahulkuulsingh/glass-morphism-1gdg https://dev.to/rahulkuulsingh/glass-morphism-1gdg <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdn49mqm9eff3p013uzh.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdn49mqm9eff3p013uzh.png" alt="Create Glass morphism in pure css"></a></p> <p>Few days ago I was experimenting in figma to find different use cases for the new trend "Glass Morphism. More specifically i was trying to find that can it be used to create 3d glass shapes. Yes with a few layers stacked together it can be done. One has to have little knowledge of perspective. </p> <p>Checkout the design files.</p> <p><a href="https://www.behance.net/gallery/115664441/Glass-Morphism-to-render-3d-products-in-figma" rel="noopener noreferrer">Behance Post</a></p> <h4> Use Cases </h4> <ol> <li><p>The trick can be used to create 3d assets, specially frosted glass.</p></li> <li><p>It can used to create complex gradients.</p></li> </ol> <p>Checkout the HTML and CSS version here. Mix and Match play with the code on code pen. do let me know your thoughts.</p> <p><a href="https://codepen.io/rahulkuulsingh/pen/GRNVJLL" rel="noopener noreferrer">CodePen Post</a></p> <ol> <li>how to create a div in perspective, </li> <li>how to apply gradient background/color to a Text element</li> <li>how to create objects that look like frosted glass</li> </ol> <p>If you have any question, do let me know.</p> css html figma codepen