<div class="container">
<p class="text">🐧PENGIN BLOG🐧</p>
</div>
* , ::before , ::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.container{
  height: 80vh;
  display: flex;
	justify-content: center;
	align-items: center;
  margin-top: 1em;
}

/* background-clip非対応ブラウザ用スタイル */
.text {
	color: red;
	display: inline-block;
	font-size: 8vw;
	font-weight: bold;
}

/* background-clip対応ブラウザ用スタイル */
@supports ((background-clip: text)) or (-webkit-background-clip: text) {
	.text {
		-webkit-background-clip: text;
		background-clip: text;
		background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
		color: transparent;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.