26 julio, 2019
Agregar efecto degradado a texto
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
SuscríbirseEstructura 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 6080 veces
