---
title: CSS Image Reflection
description: "> In this chapter you will learn how to reflect an image. ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/29.jpg) ## SS Image Reflections The `box-reflect` property is used to create an image reflection. The value of the `box-reflect` property can be: `below`, `above`, `left` , or `right`. --- ##   ## Browser Support The numbers…"
url: "https://apprentice.mn/docs/css-image-reflection/"
updated: "2021-05-12"
category: CSS
---

# CSS Image Reflection

> In this chapter you will learn how to reflect an image.

             ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/29.jpg)

## SS Image Reflections

The `box-reflect` property is used to create an image reflection.

The value of the `box-reflect` property can be: `below`, `above`, `left` , or `right`.

---

##  

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

| Property | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
| --- | --- | --- | --- | --- | --- |
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |

### Example

Here we want the reflection below the image:

     `img {
  -webkit-box-reflect: below;
}`

### Example

Here we want the reflection to the right of the image:

     `img {
  -webkit-box-reflect: right;
}`

## CSS Reflection Offset

To specify the gap between the image and the reflection, add the size of the gap to the `box-reflect` property.

### Example

Here we want the reflection below the image, with a 20px offset:

      `img {
  -webkit-box-reflect: below 20px;
}`

## CSS Reflection With Gradient

We can also create a fade-out effect on the reflection.

### Example

Create a fade-out effect on the reflection:

      `img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-image-reflection%2F&linkname=CSS%20Image%20Reflection)[https://www.addtoany.com/share](https://www.addtoany.com/share)