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.
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
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
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
Add your text or image here and generating code
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
.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;
}