In design, reflections are stylized mirror images of objects. Even though they are not as popular as shadows, they have their moments — just think about the first time you explored the different font formats in MS Word or PowerPoint: I bet reflection was your second-most-used style, next to shadow, foregoing others like outline and glow. Or perhaps you remember when reflections were all the rage back when Apple used them on just about everything.
![Old iPod Touch product image showing the front, back, and profile of the device with subtle reflections beneath each.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/04/s_FADC46B93132CB28414BDDD31E83B3FC76FCA1AA81C74A7F0114AA1190FA19BF_1651096150975_iu.jpeg?resize=980%2C622&ssl=1)
Reflections are still cool! And unlike years past, we can actually make reflections with CSS! Here’s what we’ll be making in this article:
There are two steps to a reflection design:
- Create a copy of the original design.
- Style that copy.
The most authentic and standardized way to get a mirror image in CSS now would be to use the element()
property. But it’s still in its experimental phase and is only supported in Firefox, at the time of writing this article. If you’re curious, you can check out this article I wrote that experiments with it.
So, rather than element()
, I’m going to add two of the same designs and use one as the reflection in my examples. You can code this part to be dynamic using JavaScript, or use pseudo-elements, but in my demos, I’m using a pair of identical elements per design.
<div class="units">
<div>trinket</div>
<div>trinket</div>
</div>
.units > * {
background-image: url('image.jpeg');
background-clip: text;
color: transparent;
/* etc. */
}
The original design is a knock-out text graphic created from the combination of a background image, transparent text color, and the background-clip
property with its text
value.
The bottom element of the pair is then turned upside-down and moved closer to the original design using transform
. This is the reflection:
.units > :last-child {
transform: rotatex(180deg) translatey(15px);
}
The now upturned bottom element will take on some styles to create fades and other graphic effects on the reflection. A gradual fading of reflection can be achieved with a linear gradient image used as a mask layer on the upturned element.
.units > :last-child {
transform: rotatex(180deg) translatey(15px);
mask-image: linear-gradient(transparent 50%, white 90%);
}
By default, the mask-mode
of the mask-image
property is alpha
. That means the transparent parts of an image, when the image is used as a mask layer for an element, turn their corresponding areas of the element transparent as well. That’s why a linear-gradient
with transparent gradation at the top fades out the upside-down reflection at the end.
We can also try other gradient styles, with or without combining them. Take this one with stripes, for example. I added the pattern along with the fade effect from before.
.units > :last-child {
/* ... */
mask-image:
repeating-linear-gradient(transparent, transparent 3px, white 3px, white 4px),
linear-gradient( transparent 50%, white 90%);
}
Or this one with radial-gradient
:
.units > :last-child {
/* ... */
mask-image: radial-gradient(circle at center, white, transparent 50%);
}
Another idea is to morph the mirror image by adding skew()
to the transform
property. This gives some movement to the reflection.
.units > :last-child {
/* ... */
transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(30px);
}
When you need the reflection to be subtle and more like a shadow, then blurring it out, brightening it, or reducing its opacity, can do the trick.
.units > :last-child {
/* ... */
filter: blur(4px) brightness(1.5);
}
Sometimes a reflection can also be shadowy itself, so, instead of using the background image (from the original design) or a block color for the text, I tried giving the reflection a series of translucent shadows of red, blue and green colors that go well with the original design.
.units > :last-child {
/* ... */
text-shadow:
0 0 8px rgb(255 0 0 / .4),
-2px -2px 6px rgb(0 255 0 / .4),
2px 2px 4px rgb(0 255 255 / .4);
}
Do those rgb()
values look weird? That’s a new syntax that’s part of some exciting new CSS color features.
Let’s bring all of these approaches together in one big demo:
Wrapping up
The key to a good reflection is to go with effects that are subtler than the main object, but not so subtle that it’s difficult to notice. Then there are other considerations, including the reflection’s color, direction, and shape.
I hope you got some inspirations from this! Sure, all we looked at here was text, but reflections can work well for any striking element in a design that has a sensible enough space around it and can benefit from a reflection to elevate itself on the page.
There’s also the non-standard
box-reflect
property, only supported in Chrome and Safari. It’s definitely not as advanced as the various methods you cited above though.Very impressive. Thanks for share.
If you’re aiming for a realistic reflection on matte surface, I think you need to use something heavier, like multiple blur layers. I needed to simulate tilt-shift and found this to be the only way.
See codepen (and related codepens in my profile there): https://codepen.io/tehoko/pen/JjrLRLe
Very impressive demo! But it’s causing some stuttering since it seems pretty GPU-intensive with all those CSS
blur
filters. I guess a Javascript-based solution might be more suited for that.Wholesome post. Thank you.
When a screen reader user encounters reflections using this technique, it will announce the text twice. Add
aria-hidden="true"
to the second<div>
.