Html css gradient text effect project in english
In this chapter, we will know how to apply gradient color in the text displayed in the web page.
Example 1.1
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: brown; overflow: hidden; } h1 { font-size: 8em; background: linear-gradient (to bottom, orange 0%, white 20%,skyblue 43%, gray 60%,lightgray 82%, white 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h1::before { content: attr(data-text); width: 100%; position: absolute; } span::before { content: attr(data-text); position: absolute; h1::after { content: attr(data-text); position: absolute; </style> </head> <body> <div><h1 data-text="AMCODESTAR.COM"><span data-text="AMCODESTAR .COM">AMCODESTAR .COM</span> </h1></div> </body> </html> |
Output
Example 1.2
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color:saddlebrown; } h1 { background: linear-gradient (to bottom, red 30%, yellow 38%,orange 38%, green 61%,red 65%, blue 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; position: relative; font-size:8em; } h1::after { content: attr(data-heading); left: 0; top: 0; width: 100%; position: absolute; </style> </head> <body> <div> <h1 data-heading= "AMCODESTAR.COM"> AMCODESTAR.COM </h1> </div> </body> </html> |
Output
Example 1.3
In both the above examples, gradient color text has been applied, apart from this you can use an image.
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body{ min-height: 100vh; } html, body { height: 100%; background-image: url("text.jpg"); background-size: cover; } h1 { display: flex; align-items: center; justify-content: center; align-content: center; height: 100%; font-size: 8em; background: black; color: white; mix-blend-mode: multiply; } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
