How to Create Embossed Text Effect using CSS ?
The embossed text effect can be easily generated using HTML and CSS. We will use the CSS text-shadow property to get the desired output.
HTML Code: In this section, we will create a basic structure of the body that holds text or heading.
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Embossed Text Effect</title></head> <body> <div> <h2>GeeksforGeeks</h2> </div></body> </html> |
CSS Code: In this section we will style the text. We will use the CSS text-shadow property to add shadow to the text and create the embossed effect.
<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%); } h2 { color: #65E73C; text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5), 2px -2px 0 rgba(255, 255, 255, 0.9); }</style> |
Final Code: It is the combination of the above two code sections.
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Embossed 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%); } h2 { color: #65E73C; text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5), 2px -2px 0 rgba(255, 255, 255, 0.9); } </style></head> <body> <div> <h2>GeeksforGeeks</h2> </div></body> </html> |
Output:
Please Login to comment...