Hướng dẫn text color gradient css codepen - màu văn bản gradient css codepen

• HTML
• SCSS

• Kết quả
• Bỏ qua kết quả iframe

<h2 class="gradient-text">Hello</h2>

$font: 'Poppins', sans-serif;

// Pen
.gradient-text {
	text-transform: uppercase;
	font: {
		size: 20vw;
		family: $font;
	};
	// Gradient text CSS
	background: linear-gradient(to right, #ff8a00 0%, #da1b60 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


// styles
body {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

Xem tổng hợp

CSS bên ngoài

Bút này không sử dụng bất kỳ tài nguyên CSS bên ngoài nào.

JavaScript bên ngoài

Bút này không sử dụng bất kỳ tài nguyên JavaScript bên ngoài nào.