You can use text effects to make your website titles more beautiful. In this post, we have prepared a text effect in accordance with dark websites. This text effect has a blue and green theme. Light travels like a wave in the letters of this text. There is also a line corresponding to the color of the text at the top and bottom of the text.
HTML
<!-- This script got from www.devanswer.com -->
<div class="tex">
<span class="tex1"
text="Devanswer.com">Devanswer.com</span>
<span class="tex2"></span>
<span class="tex3"></span>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.tex {
overflow: hidden;
position: relative;
filter: brightness(180%);
}
.tex1 {
background: #000;
color: #fff;
font-size: 100px;
position: relative;
font-weight: bold;
user-select: none;
}
.tex1::before {
color: #fff;
position: absolute;
content: attr(text);
filter: blur(.017em);
mix-blend-mode: difference;
}
.tex2 {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
mix-blend-mode: multiply;
background: -webkit-linear-gradient(top left, #0f0, #0ff);
}
.tex3 {
top: -100%;
left: -100%;
bottom: 0;
right: 0;
position: absolute;
animation: light 6s linear infinite;
mix-blend-mode: color-dodge;
background: radial-gradient( #fff, transparent 25%)center/25% 25%, radial-gradient( #fff, #000 25%)center/12.5% 12.5%;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
