.left-to-right {
mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
}
.rigth-to-left {
mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}
.top-to-bottom {
mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}
.bottom-to-top {
mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
}
.to-rottom-left {
mask-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to bottom left, rgba(0,0,0,0), rgba(0,0,0,1));
}
.abrupt {
mask-image: linear-gradient(to bottom left, 50% rgba(0,0,0,0), 50% rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(to bottom left, rgba(0,0,0,0) 50% ,rgba(0,0,0,1) 50%);
}
.round {
mask-image: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: radial-gradient(rgba(0,0,0,1) 50%, rgba(0,0,0,0) 60%);
}
/* ------------- card styles --------------*/
:root {
--side: 100px;
--inner-side: 90px;
}
body {
background-color: #69c;
counter-reset: section;
display: flex;
flex-wrap: wrap;
}
.character-box {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: var(--side);
height: var(--side);
margin: 10px;
line-height: var(--side);
text-align: center;
vertical-align: middle;
position: relative;
font-size: calc(var(--inner-side) / 1.5);
font-family: Roboto, sans-serif;
background-image: url(https://picsum.photos/id/12/400?blur=1.2);
}
.character-box::before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/12/400?blur=1.2);
z-index: -2;
}
.character-box::after {
content: "";
position: absolute;
width: var(--inner-side);
height: var(--inner-side);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
background-color: #111;
z-index: -2;
}<div class="left-to-right">
<h2 class="character-box">A</h2>
</div>
<div class="rigth-to-left">
<h2 class="character-box">A</h2>
</div>
<div class="top-to-bottom">
<h2 class="character-box">A</h2>
</div>
<div class="bottom-to-top">
<h2 class="character-box">A</h2>
</div>
<div class="abrupt">
<h2 class="character-box">A</h2>
</div>
<div class="to-rottom-left">
<h2 class="character-box">A</h2>
</div>
<div class="round">
<h2 class="character-box">A</h2>
</div>