Agregar efecto degradado a texto

¿Cómo crear el efecto de degradado en un texto con CSS?

Agregar efecto degradado a texto

¿Cómo crear el efecto de degradado en un texto con CSS?

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

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.

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 1280 veces | Publicado hace 1 año

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021