Glowing Gradient Fieldset - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glowing Gradient Fieldset</title> <style> body { font-family: 'Arial', sans-serif; background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .fieldset-container { width: 60%; max-width: 800px; } fieldset { border: none; border-radius: 15px; padding: 20px; position: relative; background: linear-gradient(135deg, #ff7e5f, #feb47b); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); color: white; } legend { font-size: 1.5rem; font-weight: bold; color: white; position: relative; padding: 0 10px; border-radius: 5px; border: 2px solid #f64f59; display: inline-block; animation: glow 1.5s infinite alternate; } @keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #ff7e5f, 0 0 30px #feb47b, 0 0 40px #ff7e5f, 0 0 50px #feb47b, 0 0 60px #ff7e5f; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff7e5f, 0 0 40px #feb47b, 0 0 50px #ff7e5f, 0 0 60px #feb47b, 0 0 70px #ff7e5f; } } .fieldset-content { margin-top: 20px; } .icon { width: 30px; height: 30px; margin-right: 10px; } .info-item { display: flex; align-items: center; margin-bottom: 10px; } </style> </head> <body> <div class="fieldset-container"> <fieldset> <legend>Glowing Gradient</legend> <div class="fieldset-content"> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/html-5--v1.png" class="icon" alt="HTML Icon"> <span>HTML5 Markup</span> </div> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/css3.png" class="icon" alt="CSS Icon"> <span>CSS3 Styling</span> </div> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/javascript.png" class="icon" alt="JavaScript Icon"> <span>JavaScript Functionality</span> </div> </div> </fieldset> </div> </body> </html>