How to add image refaction using CSS ? Last Updated : 30 May, 2023 Comments Improve Suggest changes Like Article Like Report This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mirror-like reflection below or above an element., and box-reflect property is nonstandard property so we use -webkit-box-reflect as a prefix. -webkit-box-reflect: This property creates an image reflected in the below, above, left, or right position. Syntax: -webkit-box-reflect: below | above | left | right; Example 1: In the below code, we will make use of the above syntax to add reflection. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <style> h1 { color:green; } img { -webkit-box-reflect:right; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>A computer science portal for geeks</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" alt="GFG image"> </center> </body> </html> Output: Example 2: In the below code, we will make use of the above syntax to add reflection. HTML <!DOCTYPE html> <html> <head> <title>GeeksforGeeks</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <style> h1 { color:green; } img { -webkit-box-reflect: below; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>A computer science portal for geeks</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" alt="GFG image"> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article How to add image refaction using CSS ? K krishna_97 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to repeat border image using CSS ? You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border.Syntax:border-image-repeat: stretch|repeat|round|initial|inheritNote: The border 2 min read How to add a mask to an image using CSS ? The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper 2 min read How to add a button to an image using CSS ? In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope 4 min read How to Add Visual Effects to Images using CSS? CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visua 2 min read How to Add Shadow to Image in CSS ? Adding shadow to an image can enhance its visual appeal and make it stand out on your webpage. In this article, we will explore various approaches to add shadow to an image using CSS. Table of Content Add Shadow on Image using box-shadow PropertyAdd Shadow on Image on HoverAdd Shadow on Image using 2 min read Like