Skip to main content

Glowing text in css

Glowing text in CSS


Hello student in this tutorial we will see that how to make glowing text in css 
so let's  break down this topic here .







1 . we taking a div or any tag, class, id for targeting text so here i am taking a id so first  we will center of this element through position absolute like this 
 
  #text {
            /* position center through position absolute*/
            positionabsolute;
            top40%;
            left50%;
            transformtranslate(-50%-50%);
}


2. Again in this css we coding for text shadow like this through text-shadow carefully see of this code here and try in your code editer.
  
        #text {
            /* position center through position absolute*/
            positionabsolute;
            top40%;
            left50%;
            transformtranslate(-50%-50%);
            /* text glowing like this pay attention here */
            text-shadow0 0 4px white0 0 4px red0 0 4px red,
 0 0 4px red0 0 4px red0 0 4px red0 0 4px red;
            /*you can adjust of this according to you font size */
            font-size40px;
            colorblack;
        }

here one this that you can change text-shadow pixel value according to your font-size  and color you can also change of this value like px value and color .

  text-shadow0 0 4px white0 0 4px red0 0 4px red,
 0 0 4px red0 0 4px red0 0 4px red0 0 4px red;
            /*you can adjust of this according to you font size */
            font-size40px;




you can use of this code-source through copy and paste.

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            background-colorblack;
        }
        
        #text {
            /* position center through position absolute*/
            positionabsolute;
            top40%;
            left50%;
            transformtranslate(-50%-50%);
            /* text glowing like this pay attention here */
            text-shadow0 0 4px white0 0 4px red0 0 4px red,
 0 0 4px red0 0 4px red0 0 4px red0 0 4px red;
            /*you can adjust of this according to you font size */
            font-size40px;
            colorblack;
        }
    </style>
</head>

<body>



    <div id="text">it is glowing text </div>
</body>

</html>

Comments