<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.vertical {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 60px;
background: linear-gradient(to right, #1c87c9 50%,#113155 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.horizontal {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 60px;
background: linear-gradient(to top, #1c87c9 50%,#113155 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>
<h2>Вертикальная стилизация половины буквы.</h2>
<span class="vertical">X</span>
<h2>Горизонтальная стилизация половины буквы.</h2>
<span class="horizontal">X</span>
</div>