For dark themed websites, if you want to use a simple and beautiful effect for titles, this code is a very good option for your website. In this code, the text is orange and has a red shadow. In addition, it is like a fire at the top of the text and the amount of light increases and decreases. Also, this light goes a little to the right and left, which makes this effect more natural.
HTML
<!-- This script got from www.devanswer.com -->
<div class="dark fire">
<h1 class="Blazing" contenteditable="true">Devanswer.com</h1>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url(https://fonts.googleapis.com/css?family=Akronim);
body {
background: #ca8;
}
.fire {
margin: 50px auto;
width: 80%;
max-width: 1000px;
height: 200px;
background-position: center center;
background-size: 1000px 200px;
border-radius: 10px;
font-family: 'Akronim';
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.fire:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Blazing {
display: inline-block;
margin: 0;
color: rgb(255, 115, 0);
font-size: 100px;
line-height: 50px;
min-width: 50px;
outline: none;
vertical-align: middle;
text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
animation: 2s Blazing infinite alternate linear;
}
@keyframes Blazing {
0% {
text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
}
25% {
text-shadow: 0 3px 20px red, 0 0 30px red, 0 0 20px orange, 0 0 5px yellow, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow;
}
50% {
text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow, 2px -20px 30px rgba(255,255,0,0.5);
}
75% {
text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, 3px -5px 5px yellow, -4px -10px 10px yellow, 2px -20px 30px rgba(255,255,0,0.5), 0px -25px 40px rgba(255,255,0,0)
}
100% {
text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
}
}