CSS Text Image Reflection Code

The -webkit-box-reflect CSS property is used to create reflective effects on elements, giving the illusion of a mirrored surface. This property is particularly useful for enhancing the visual aesthetics of elements, such as images or text, by adding a mirrored reflection below or around them.

In CSS, reflections can be achieved using the -webkit-box-reflect property. This property allows developers to create a mirror-like image below an element, giving the appearance that the element is reflected onto a smooth, reflective surface. The -webkit-box-reflect property is commonly applied to images, text, or other graphical elements.

Demo CSS Reflection
Demo

Note: It is important to mention that the -webkit-box-reflect property may not be supported in all browsers.

How to use the -webkit-box-reflect property in CSS

Here's a simple example of CSS reflection:

Syntax:

-webkit-box-reflect: <direction> <offset> <mask-box-image>;
  • <direction>: Determines the direction of the reflection, which can be specified as either above, below, left, or right of the content box.
  • <offset>: Defines the distance between the content and its reflection.
  • <mask-box-image>: Specifies an image to use as a mask for the reflection, allowing for more intricate reflection effects.

CSS Reflect direction

Specifies the direction of the reflection, such as above, below, left, or right

-webkit-box-reflect: below, above, left, right

Preview reflect direction

below
above
left
right

CSS Reflection Offset

Defines the distance between the element and its reflection.

-webkit-box-reflect: below 10px;
-webkit-box-reflect: below -1px;

Preview reflect Offset

below 10px
below -1px

CSS Reflection With Gradient

Specifies an image to be used as a mask for the reflection, allowing for additional customization. fade-out effect on the reflection.

-webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, #FFFFFF);

Gradient color opacity

The -webkit-box-reflect attribute in CSS does not provide a direct way to change the opacity of the reflected image. However, you can achieve a similar result by using a mask-box image with a gradient to control the opacity of the reflection. Take a look at the following example that illustrates this technique

-webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgb(255 255 255 / 50%))

Gradient color-stop

-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(45%, transparent), to(#FFFFFF))

Preview reflection with gradient

gradient
opacity
color-stop

Add your text or image here and generating code

Reflect item
apple image
Font Style:
Reflect direction
Google Font Link
Copy and Paste this code between the head tag
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag

How to create a reflection effect without using CSS -webkit-box-reflect

You can create a reflection effect in CSS without using the -webkit-box-reflect property. You can use different techniques like CSS transform and pseudo-elements. A popular method involves using the :before or :after pseudo-elements to create a mirrored duplicate of the element and then applying a vertical flip transformation. Let me show you a simple example of how this can be done.

  • This code snippet uses the ::before and ::after pseudo-elements to create a mirror reflection effect for the image.
  • The transform property is used to flip the image vertically
  • The opacity and filter properties are used to adjust the visibility and blur of the reflection.

Preview Example

HTML
<div class="reflection"></div>
CSS
.reflection {
    position: relative;
    width: 80px;
    height: 90px;
    background-image: url('https://www.html-code-generator.com/images/css/apple.webp');
    background-size: 100%;
    background-repeat: no-repeat;
}
.reflection::before {
    background-size: 80px;
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-image: url('https://www.html-code-generator.com/images/css/apple.webp');
    opacity: 0.3; /* Adjust the opacity*/
    transform: scaleY(-1); /* Flip the image vertically */
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    z-index: 10;
    filter: blur(0px);
    margin-top: 0px;
}
Try it Yourself Run code