Approach:
Please refer linear-gradient(), method to sreate a gradient background and then use webkit properties to overlay that background with our text.
HTML Code: In the following section, the text used for demonstration is wrapped inside h1 tag.
<!-- Write HTML code here --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Gradient Text</title> </head> <body> <h1>BAJARANGI SOFT</h1> </body> </html>
CSS Code: For CSS code, please follow the steps given below.
<style> body { background: rgb(39, 39, 39); } h1 { position: absolute; top: 40%; left: 40%; font-size: 40px; font-family: Arial, Helvetica, sans-serif; background: linear-gradient( to right, #f32170, #ff6b08, #cf23cf, #eedd44); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Gradient Text</title> <style> body { background: rgb(39, 39, 39); } h1 { position: absolute; top: 40%; left: 40%; font-size: 40px; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } </style> </head> <body> <h1>BAJARANGI SOFT</h1> </body> </html>