How to Create Engraved Text Effect using HTML and CSS ?
The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive.
Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS text-shadow property we will generate the desired effect.
Example 1:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Engraved Text Effect</title> <style> body { margin: 0; padding: 0; font-family: serif; justify-content: center; align-items: center; display: flex; background-color: #65E73C; } div { content: ''; font-size: 3em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; background: #008000; -webkit-background-clip: text; text-shadow: 2px 5px 5px rgba(255, 255, 255, 0.3); } </style></head> <body> <div> <h2>GeeksforGeeks</h2> </div></body> </html> |
In the above example, we first create a div tag that contains some text inside of it, then we design text using CSS basic properties. Then we will use the text-shadow property to generate the engraved effect.
Output:
Example 2:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Engraved Text Effect</title> <style> body { margin: 0; padding: 0; font-family: serif; justify-content: center; align-items: center; display: flex; background-color: gray; } div { content: ''; font-size: 3em; position: absolute; top: 50%; left: 50%; transform: translate(-70%, -90%); color: transparent; background: black; -webkit-background-clip: text; text-shadow: 2px 5px 5px rgba(255, 255, 255, 0.3); } </style></head> <body> <div> <h2>GeeksforGeeks</h2> </div></body> </html> |
Output:
Please Login to comment...