Agrega un degradado a tus textos con CSS puro

Crea el efecto de degradado en tus textos para tu página web

Agrega un degradado a tus textos con CSS puro

Crea el efecto de degradado en tus textos para tu página web

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.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Agrega un degradado a tus textos con CSS puro?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 129 veces | Publicado hace 6 meses

Más códigos de programación en CSS.

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019