<div class="base">
			<div class="center">
<h4>This shows the ways to use clipping mask with text for chrome and firefox.</h4>
        <p>Note:You have to switch between firefox or chrome to see how it works
				<div class="kit">
					<h1 class="mask">CSS Text Masking In Chrome </h1>
          
				</div>
				<div class="firefox">
					<style>
						.svg {
							clip-path: url(#svgPath);
						}
					</style>
					<img class="svg" src="https://pbs.twimg.com/profile_images/590205977321984002/wiJx_lh3.jpg" height="100" width="1000">
					<svg height="0" width="0">
						<defs>
							<clipPath id="svgPath">
								<text x="0" y="100">CSS Text Masking In Firefox</text>
							</clipPath>
						</defs>
					</svg>
				</div>
			</div>
		</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.base {
	display: table;
	height: 100%;
	width: 100%;
}

.center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

h1, text {
	font-size: 70px;
	font-weight: 400;
}


h1.mask {
	background-image: url(https://pbs.twimg.com/profile_images/590205977321984002/wiJx_lh3.jpg);
	background-clip: text;
	color: transparent;
  -webkit-background-clip: text;
}

.firefox {
	display: none;
}

@-moz-document url-prefix() {
	
  .kit {
		display: none;
	}

	.firefox {
		display: block;
    
    
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.