Gradient Design - VexaX
Run Code
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>Gradient Design</title> <style> body { font-family: 'Arial', sans-serif; background-color: #ffffff; margin: 0; padding: 20px; } .progress-bar-container { margin: 20px 0; } .progress-bar-title { font-size: 18px; margin-bottom: 5px; } .progress-bar { position: relative; width: 100%; height: 40px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 20px; overflow: hidden; border: 1px solid #e0e0e0; } .progress-bar-fill { height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: #fff; font-size: 16px; transition: width 1s ease-in-out; } @keyframes progress1 { from { width: 0%; } to { width: 65%; } } .progress-bar-1 .progress-bar-fill { background: linear-gradient(135deg, #ff7e5f, #feb47b); animation: progress1 3s forwards; } @keyframes progress2 { from { width: 0%; } to { width: 75%; } } .progress-bar-2 .progress-bar-fill { background: linear-gradient(135deg, #6dd5ed, #2193b0); animation: progress2 3s forwards; } @keyframes progress3 { from { width: 0%; } to { width: 80%; } } .progress-bar-3 .progress-bar-fill { background: linear-gradient(135deg, #ff9a9e, #fada5e); animation: progress3 3s forwards; } @keyframes progress4 { from { width: 0%; } to { width: 70%; } } .progress-bar-4 .progress-bar-fill { background: linear-gradient(135deg, #a2c2e2, #2c3e50); animation: progress4 3s forwards; } @keyframes progress5 { from { width: 0%; } to { width: 85%; } } .progress-bar-5 .progress-bar-fill { background: linear-gradient(135deg, #f6d365, #fda085); animation: progress5 3s forwards; } @keyframes progress6 { from { width: 0%; } to { width: 90%; } } .progress-bar-6 .progress-bar-fill { background: linear-gradient(135deg, #00d2d3, #028d8c); animation: progress6 3s forwards; } </style> </head> <body> <h1>Gradient Design</h1> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 1 🌅</div> <div class="progress-bar progress-bar-1"> <div class="progress-bar-fill">65%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 2 🌊</div> <div class="progress-bar progress-bar-2"> <div class="progress-bar-fill">75%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 3 🌟</div> <div class="progress-bar progress-bar-3"> <div class="progress-bar-fill">80%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 4 🔥</div> <div class="progress-bar progress-bar-4"> <div class="progress-bar-fill">70%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 5 🌼</div> <div class="progress-bar progress-bar-5"> <div class="progress-bar-fill">85%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 6 🏆</div> <div class="progress-bar progress-bar-6"> <div class="progress-bar-fill">90%</div> </div> </div> </body> </html>