Agregar efecto degradado a texto

Autor: J. Luis

#CSS #HTML

Con este tip podrás darle un degradado a cualquier texto que tengas en tu pagina web, así podrás resaltar de forma extraordinaria un titulo, con CSS puro

Suscríbete a nuestro canal en Youtube

Estructura HTML:


<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 , maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet"  href="style.css">
	<title>Degradado</title>

</head>
<body>
<h1>Texto con fondo degradado solo en chrome</h1>

</body>
</html>

Codigo CSS:

body{
	background: #222;
	display: flex;
	justify-content:center;
	align-items:center;
	height: 100vh;
}
h1{
	margin: 0;
	font-size: 4em;
	text-align: center;
	color: transparent;
	font-weight: normal;
	background: linear-gradient(red,yellow,black);
	-webkit-background-clip:text;
	position: relative;
}
	h1:after{
		content: "Texto con fondo degradado solo en chrome";
		position: absolute;
		width: 100%;
		top: 3px;
		left: 3px;
		color: #000;
		z-index: -1
	}
	h1:hover{
			margin: 0;
			font-size: 4em;
			text-align: center;
			color: transparent;
			font-weight: normal;
			background: linear-gradient(360deg,skyblue,purple,green);
			-webkit-background-clip:text;
			position: relative;

	}

Con esto podras dar un efecto interesante a tus titulos o texto en tu pagina web, nos vemos en otro tip.

Leido 7049 veces | 0 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos