Image Reflection offset
For defining the space between the original image and the reflection of the image.
Example: The example below illustrates the reflection of an image using the property box-reflect with the value right and space between the original image and the reflection.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Image Reflection</ title > < style > .gfg { font-size: 40px; font-weight: 700; color: green; } .texttitle { font-size: 20px; padding: 10px; } img { width: 400px; height: 300px; -webkit-box-reflect: right 10px; } .box { display: flex; flex-direction: column; } </ style > </ head > < body > < div class = "box" > < div class = "gfg" >w3wiki</ div > < div class = "texttitle" > CSS Image Reflection with property box-reflect and value right with space </ div > < img src = "https://media.w3wiki.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp" alt = "GfGwebdesign" > </ div > </ body > </ html > |
Output:
CSS Image Reflection
CSS Image Reflection is a visual effect where an image appears as if it is reflected on some reflective surface, thereby generating a mirrored or inverted version of the original image below it. To achieve the Image Reflection in CSS, the CSS box-reflect Property can be applied. The value of the box-reflect
property can be like above
, below
, right
, or left
.
However, the box-reflect Property is not supported by all browsers. Use -webkit-box-reflect property for WebKit-based browsers that are Chrome and Safari. There are a variety of values that can be defined to achieve the reflection in various directions. Additionally, the reflection with fading effect can also be done with the help of linear-gradient.
Note: Use –webkit– to the box-reflect property, to see the effect on the specific browser.
Table of Content
- Image Reflection below the Original Image
- Image Reflection to the Right
- Image Reflection offset
- Image Reflection with Gradient