Gradient Text Only CSS - how to make gradient text in CSS Part 4

Опубликовано: 16 Январь 2022
на канале: Masters In Web Design

Gradient Text Only CSS - how to make gradient text in CSS

/*CSS*/
*,*::before, *::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
background: radial-gradient(#D9D9D9, #FFF);
font-family: sans-serif;
display: grid;
place-items: center;
}
.container{
width: 480px;
height: 100px;
line-height: 100px;
text-align: center;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #ff5e52, #4cacf9, #c245d7, #ffd146, #f53e7c);
}
h1{
font-size: 5rem;
font-weight: 900;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: screen;
}

Смотрите видео Gradient Text Only CSS - how to make gradient text in CSS Part 4 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 16 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14 раз и оно понравилось 3 людям.