Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS Image Reflection

10 minutes

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Image Reflection

This chapter will teach you how to mirror an image

CSS Image Reflections

The box-reflect property facilitates the generation of an image reflection.

The box-reflect property can take one of the following values: below, above, left, or right.

Browser Support

The figures in the table indicate the earliest browser version that comprehensively supports the property.

Numbers accompanied by -webkit- indicate the initial version that functioned with a prefix.

Example

Here we desire the reflection to appear beneath the image.

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

Example

Here we aim for the reflection to be positioned on the right side of the image.

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

CSS Reflection Offset

To define the space between the image and its reflection, include the gap size within the box-reflect property.

Example

Here we aim for the reflection to be positioned below the image, with a 20px offset.

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

CSS Reflection With Gradient

Additionally, we have the capability to generate a fade-out effect on the reflection.

Example

Implement 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));
}