Is it possible to get cut out text effect like this using CSS/CSS3 only?

Question

Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.

Answer 1

A slightly softer way of using the pseudo-elements Web_Designer mentioned:

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
}

.depth:after {
    text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
    content: attr(title);
    padding: 50px;
    color: transparent;
    position: absolute;
    top: 1px; 
    left: 1px;
}

It's a bit simpler - to get the soft rim of the depression you use the text-shadow of the :after pseudo and make it transparent, rather than using two pseudos. To my mind, it looks a lot cleaner too - it can work at much greater sizes. I've no idea how fast it is, though you'll probably be using text-shadow sparingly anyway.