Reflection Effects On Images Or Text Using CSS

Contents

How to use the -webkit-box-reflect
Create Online CSS Reflections
Create reflection effect without using CSS -webkit-

In CSS, the -webkit-box-reflect property creates a mirror-like reflection below an element, often used for images, text, or graphics.

CSS reflections are a great way to add depth and visual interest to your web design. In this tutorial, we will cover the basics of CSS reflections and show you how to create stunning reflection effects.

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

Demo CSS Reflection

Demo

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

Here is 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.

Direction

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

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

Demo Preview reflect direction

below

above

left

right

Offset

Defines the distance between the element and its reflection.

-webkit-box-reflect: below 10px;

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

Demo Preview reflect Offset

below 10px

below -1px

Mask 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);

opacity

The -webkit-box-reflect attribute in CSS does not directly adjust reflection opacity, but you can mimic this effect using a mask-box image with a gradient. Here is an example.

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

color-stop

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

Demo Preview reflection with gradient

gradient

opacity

color-stop

Create Real-Time CSS Reflections

Easily generate reflection effects for your text or images. Simply add your content below, and we will create the CSS code for you.

How to Use This Tool

Select the element you want to reflect (Text or Image).
Enter your text or upload an image from your device.
Choose the reflection direction (Below, Above, Left, or Right).
Customize the reflection settings (Offset, Opacity, etc.).
Copy the generated CSS code to use on your website.

Reflect element

Text Image

Your Text

Text Color

Image URL

Font Family:

Font Style:

B I

Reflect direction

Below Above Left Right

Offset

Color-stop

Opacity

Font Size

Width

Reflection code HTML and CSS

HTML

<img class="css-reflect" src="/images/css/apple.webp" alt="">

CSS

.css-reflect {
  -webkit-box-reflect: below -10px -webkit-gradient(linear, left top, left bottom,  from(transparent), color-stop(0%, transparent), to(rgba(255, 255, 255, 0.75)));
  width: 80px;
}

Run code Edit Code Download

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.

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

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.

Click the button below live preview and edit code

Try it Yourself Run code

Report Problem