Creating Realistic Reflections With CSS

Understanding CSS Image Reflections

CSS image reflections create visual duplicates of elements that appear as if viewed in a reflective surface--similar to looking at an image in a mirror or pool of water. This technique has been popular since Apple's product pages popularized it, using subtle reflections to make products appear as if floating on glossy surfaces.

The appeal of CSS reflections lies in their simplicity and performance. Unlike JavaScript-based alternatives that require creating and manipulating DOM elements, CSS reflections can be achieved through pure styling. Modern browsers support several approaches, each with distinct advantages in terms of browser support, flexibility, and visual quality.

Reflections serve multiple purposes beyond mere aesthetics. They create visual depth that makes interfaces feel more polished and professional. When applied strategically--such as to product images in an e-commerce store or portfolio pieces on a creative website--reflections draw the eye and encourage engagement. The subtle visual cue of a reflection suggests quality and attention to detail, subtly influencing user perception of the overall brand. For teams building modern web applications, mastering CSS visual effects is essential for creating premium user experiences.

Our custom web development services help businesses implement sophisticated visual techniques like CSS reflections to differentiate their online presence.

The box-reflect Property

The box-reflect property represents the most direct approach to creating CSS reflections, though it comes with significant browser limitations. This WebKit-only feature is supported in Safari and Chrome browsers.

Basic Syntax

.image-with-reflection {
 -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255,255,255,0.3));
}

This single property creates a reflection directly below the element, with a 2-pixel gap and a gradient fade from transparent to semi-transparent white.

Positioning Options

The box-reflect property accepts several values for positioning:

• above: Creates a reflection above the element
• below: Creates a reflection below the element (most common)
• left: Creates a reflection to the left of the element
• right: Creates a reflection to the right of the element

You can also specify offset values and combine them with gradient masks to control the fade effect precisely.

For teams implementing cross-browser compatible solutions, combining this approach with the transform and scaleY technique ensures consistent results across all browsers.

Using Transforms with scaleY and Opacity

For broader browser compatibility, the transform approach offers excellent results across all modern browsers. This technique involves creating a duplicate element, flipping it vertically, and applying opacity and masking effects.

HTML Structure

<div class="image-container">
 <img src="image.jpg" alt="Product photo">
 <img class="reflection" src="image.jpg" alt="" aria-hidden="true">
</div>

CSS Implementation

.image-container {
 position: relative;
 width: 300px;
}

.reflection {
 position: absolute;
 bottom: -100%;
 left: 0;
 width: 100%;
 transform: scaleY(-1);
 opacity: 0.3;
 filter: blur(2px);
 mask-image: linear-gradient(transparent, black);
}

The key properties are transform: scaleY(-1) for vertical flipping and mask-image with a linear gradient for the characteristic fade effect. This approach requires additional HTML markup but works consistently across all modern browsers including Firefox, Chrome, Safari, and Edge.

The Pseudo-Element Approach

The pseudo-element approach combines the transform technique with CSS pseudo-elements to avoid additional HTML markup. Using the ::after pseudo-element, you can create reflections purely through CSS.

CSS Implementation

.reflective-element {
 position: relative;
}

.reflective-element::after {
 content: "";
 position: absolute;
 bottom: -100%;
 left: 0;
 width: 100%;
 height: 100%;
 background: url('image.jpg') no-repeat center;
 background-size: cover;
 transform: scaleY(-1);
 opacity: 0.5;
 mask-image: linear-gradient(transparent, black);
}

This method references the same image through CSS background properties, eliminating the need for duplicate HTML elements while maintaining full control over the reflection's appearance. The pseudo-element inherits dimensions from the parent and applies the same background image, then flips and fades it to create the reflection effect.

Masking with Gradients for Fading Effects

The mask-image property is crucial for creating realistic reflection effects. By applying gradient masks, you control how the reflection fades from the original element outward.

Gradient Techniques

Simple Linear Fade:

.reflection {
 mask-image: linear-gradient(transparent 50%, white 90%);
}

Repeating Stripe Pattern with Fade:

.reflection {
 mask-image:
 repeating-linear-gradient(transparent, transparent 3px, white 3px, white 4px),
 linear-gradient(transparent 50%, white 90%);
}

Radial Fade from Center:

.reflection {
 mask-image: radial-gradient(circle at center, white, transparent 50%);
}

The default mask mode is alpha, meaning transparent parts of the mask make corresponding areas of the element transparent. Linear gradients create the most common fade effect, while repeating patterns add visual interest and radial gradients work particularly well for circular elements.

Morphing Reflections with Transform Modifications

Beyond simple vertical flipping, CSS transforms allow you to create reflections with interesting distortions and angles. Adding skew() or rotate() creates more dynamic visual effects.

Dynamic Reflection Effect

.morphed-reflection {
 transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(30px);
}

This combination of transforms creates a reflection that appears tilted and offset from the original, mimicking what you might see when viewing an object at an angle relative to a reflective surface.

Filter Effects for Refinement

.subtle-reflection {
 filter: blur(4px) brightness(1.5);
}

Applying blur() softens the reflection, making it appear more like a genuine reflection on a surface. The brightness() filter compensates for the natural dimming that occurs in reflections. These filters help create more realistic or stylized reflection effects depending on your design goals.

Combining Reflections with Other CSS Effects

Shadows and Reflections Together

.floating-element {
 -webkit-box-reflect: below 5px linear-gradient(transparent 50%, rgba(0,0,0,0.2));
 box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

The shadow creates the illusion of elevation, while the reflection provides the suggestion of a reflective surface beneath. This combination works particularly well for product cards, featured images, or any elements that benefit from a sense of depth.

Animated Reflections

.animated-reflection {
 -webkit-box-reflect: below 5px linear-gradient(transparent 50%, rgba(0,0,0,0.2));
 transition: -webkit-box-reflect 0.5s ease-in-out;
}

.animated-reflection:hover {
 -webkit-box-reflect: below 10px;
}

Hover effects that increase reflection distance create dynamic user feedback and engagement. More complex animations might include fade-ins, slide effects, or opacity transitions that respond to user interactions.

Accessibility Considerations

Screen Reader Handling

When using the duplicate-element approach to create reflections, screen readers will announce the content twice--once for the original and once for the reflection. To prevent this, add aria-hidden="true" to the reflection element:

<div class="image-container">
 <img src="product.jpg" alt="Elegant ceramic vase">
 <img class="reflection" src="product.jpg" alt="" aria-hidden="true">
</div>

Motion Sensitivity

Animated reflections may affect users with vestibular disorders or motion sensitivity. Respect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {
 .animated-reflection {
 transition: none;
 }
}

Contrast Considerations

Test reflections across different background colors. Adjust opacity, blur, and gradient fade points to ensure reflections remain visible on both light and dark backgrounds.

Building accessible web experiences is a core part of our digital accessibility services, ensuring your visual effects reach all users effectively.

Real-World Applications

Product Showcase Pages

Apple's product pages demonstrate masterful use of subtle reflections. Product images appear to float on glossy surfaces, with reflections that are noticeable but not distracting. The effect makes products feel tangible and premium, reinforcing the brand's association with quality and attention to detail.

Portfolio and Gallery Designs

Portfolio websites use reflections to make work samples stand out. Images appear to sit on reflective surfaces, drawing attention while maintaining visual coherence across the gallery. Designers may combine reflections with hover effects that enhance or remove the reflection on interaction.

Hero Sections

Hero sections with background images and reflections create immediate visual impact. The reflection adds depth to what would otherwise be a flat background image, making the hero feel more substantial and professionally designed. When used in hero sections, reflections should complement rather than overwhelm the primary message.

For e-commerce sites, implementing reflections on product images can enhance the perceived value of products. Combined with our e-commerce development services, this technique creates visually compelling product showcases that drive conversions. Our custom web development team specializes in implementing these sophisticated visual techniques for premium user experiences.

Sources

1. CSS-Tricks: Creating Realistic Reflections With CSS - Comprehensive tutorial covering transform, mask-image, filter effects, and accessibility notes
2. OpenReplay Blog: CSS Image Reflections - Guide covering box-reflect property, optimization best practices, and real-world examples