I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don’t have to reproduce an effect for every article or product on your site.
Today I would like to show you how I came up with this glass text effect.
Step 0: Patience and space
SVG can be a lot to take on, especially when you’re just starting to learn it (and if you are, Chris’ book is a good place to start). It’s practically a whole new language and, especially for people who lack design chops, there are lots of new techniques and considerations to know about. Like HTML, though, you’ll find there are a handful of tools that we can reach for to help make SVG much easier to grasp., so be patient and keep trying!
Also, give yourself space. Literally. SVG code is dense so I like to use two or three new lines to space things out. It makes the code easier to read and helps me see how different pieces are separated with less visual distraction. Oh, and use comments to mark where you are in the document, too. That can help organize your thoughts and document your findings.
I’ve made demos for each step we’re going to cover in the process of learning this glass effect as a way to help solidify the things we’re covering as we go.
OK, now that we’re mentally prepared, let’s get into the meat of it!
Step 1: Get the basic image in place
First things first: we need an image as the backdrop for our glass effect. Here we have an
element and an
within it. This is similar to adding an
in HTML. You’ll notice the dimensions of the
viewBox attribute and
element in the SVG element are the same. This ensures that the
is exactly the same size as the actual picture we’re linking to.
That’s a key distinction to note: we’re linking to an image. The SVG file itself does not draw a raster image, but we can reference one in the SVG code and make sure that asset is in the location we point to. If you’ve worked with Adobe InDesign before, it’s a lot like linking to an image asset in a layout — the image is in the InDesign layout, but the asset itself actually lives somewhere else.
Step 2: Distort the image
Straightforward so far, but this is where things get complicated because we’re going to add a filter to the image we just inserted. This filter is going to distort the image. If you look closely at the difference between the demo in the last step and the one in this step, you’ll see that the edges of objects in the image are a little rough and wavy. That’s the filter at work!
First, we create another
to hold filter. This means that if we ever want to reuse our filter — for example on multiple elements on the page — then we totally can!
Our first filter (
#displacement) is going to distort our image. We’re going to use
feDisplacementMap, each explained by Sara Soueidan much better than I can in this post. Beau Jackson also wrote up a nice piece that shows how they can be used to make a cloud effect. Suffice to say, these two filters tend to go together and I like to think of them as when something needs to appear “wobbly.”
With our filter container in place, we just need to apply that filter to our image with a
filter attribute on the
Step 3: Clip the text
We don’t want the entire image to be distorted though. We’re going to clip the shape of our distorted
to the shape of some text. This will essentially be the portion of the picture seen “through” the glass.
To do this, we need to add a
element in a
and give it an
id. Calling this
id in the
clip-path of our
now restricts its shape to that of our
Step 4: Reveal the full image
OK, so it’s bueno that we have the distorted
clipped to the
, but now the rest of the image is gone. No bueno.
We can counteract this by adding a copy of the same
but without the
filter attributes before our existing
. This is where I like to add some nice comments to keep things neat. The idea is like placing a transparent layer over what we have so far.
I know, I know, this isn’t very neat, and we’re repeating ourselves. Ideally, we would set our filter straight on the
element and use the
in="BackgroundImage property for
feDisplacementMap to warp what’s behind the text, without the need for extra elements. Unfortunately, this has poor browser support, so we’re going to go with multiple images.
Step 5: Place the text… again
Next, we’re going to duplicate our text just as we did for the image in the last step. Unfortunately, because the text is in a
clip-path, it’s now not available for rendering. This is the last time we’re going to duplicate content like this, I promise!
Now we should have something that looks like a normal image with black text over it. If the distortion
filter on the
we’ve already made is what we can see “through” the glass, then our new
is going to be the glass itself.
Step 6: Creating the dark edge of the text
This is where things start to get exciting, at least for me! ?
We want to create a dark edge along the text element which, when paired with a light edge (we’ll look at that next), will add depth to the appearance of the text against the image.
We want a new
filter for our
, so let’s create one in our filter’s SVG element and give it an
id="textFilter and link it to the
filter attribute of the
SVG works from the background to the foreground, so the first thing we’re going put in our filter is the shadow that the glass would have, as that is furthest back. I’m gonna level with you, this one is pretty complex, but we’re going to go through it one step at a time.
For this effect, we’re using four filter primitives:
feMorphology is first. We’re using this to make the text fatter. In the demo below, comment out the next three primitives (
feComposite ) and play with it. I have the value
radius="4" to achieve the glass effect, but see what happens if you set it to 1… or 100!
feOffset is used to move all the “pixels” in the previous primitive (
feMorphology ) across the x- or y-axis. The values
dy="5" move the “pixels” right on the x-axis and y-axis, respectively. The higher the number, the further they move. Put in negative numbers for
dx and the “pixels” will move left. Negative
dy and they’ll move up! Again, the is the sort of thing you start to learn as you play around with them.
The reason I have quotes around “pixels” is because they’re not screen pixels like you might expect in CSS. Rather, they refer to the dimensions we set on the parent
. I think of them as percentages. We have used these settings
viewBox="0 0 1890 1260" in our example. This means our
is 1890 “pixels” wide. If we set
dx="189" it means we’ll move our element 10% of the way across the SVG (1890 divided by 189).
feFlood is great. If you want to fill the screen with color, this is the primitive you need! You might wonder why we can’t read our text now when we apply it. That’s because you can only see the result of the last filter primitive that was created. The result of each of the previous primitives was related to our
element. The result of
feFlood is just like its name: a flood of color. It doesn’t know what you did before and it doesn’t care — it’s merely going to fill an area with color.
This is where some people start getting frustrated with SVG. It’s hard to work on something when you can’t see it! Trust me, as you work with SVG more you’ll get used to this. In fact, the next few steps will need us to rely on this and trust that everything is still in place.
feComposite is going to solve this issue for us. What does it do? MDN describes it as:
SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, and lighter.
That to me is jibba-jabba. I think of it as affecting the alpha layer of
in with the color/alpha of
With this in place we can once again see our text spelled out and, because the color we used is slightly transparent, we can even see the distorted “glass” effect coming through. Great!
Step 7: Let’s do the light edge
This is essentially the same as what we literally just did, but we’re going to shift the shape up and to the left using negative
dy values. We’re also setting a slightly white color this time. We’re aiming for a nice depth effect.
We’re again in a position where what we can see is the most recent result from a filter primitive, but we can’t see our dark edge!
feComposite isn’t what we want to use to bring them together because we don’t want the alpha of the dark edge colored by the light edge… we want to see both! Which leads us to…
Step 8: Combine the edges
feMerge! It’s a hero. It lets us take any number of primitive results and merge them, making a new image. Woohoo, we can now see both dark and light edges together!
However, we do want them to be edges rather than both filling up the entire text, so we need to remove the space that the original
takes up. What we need next is another
feComposite to chop out the original
SourceGraphic. Because we used
feMorphology to fatten the letters for our edges, we can now chop the original letter shapes out of the result of our
Now we’re starting to look like glass, with just one piece missing.
Step 9: Yes, a bevel
We have a pretty good 3D-looking glass effect. However, the letters look flat. Let’s add one more effect and make them look more rounded.
To achieve this we’re going to create a bevelled effect.
First we’re going to use
feGaussianBlur. This will blur our existing filters slightly. We’re going to use this blurred result as basis to add some
feSpecularLighting. As usual, feel free to play with the numbers here and see what effects you can get! The main one you might want to change is the
lighting-color attribute. The image that we’re using here is slightly dark, so we’re using a bright
lighting-color. If your image was very bright, this would make the letters hard to read, so you might use a darker
lighting-color in that case.
Step 10: All together now!
Finally, with all the pieces ready, we do one last
feMerge to get everything in place for the finished effect!
Here’s everything together, nicely spaced out and commented: