Colorful Gradient Chips - 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>Colorful Gradient Chips</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .chips-container { display: flex; flex-wrap: wrap; gap: 15px; } .chip { display: flex; align-items: center; background: linear-gradient(45deg, #f3ec78, #af4261); border-radius: 25px; padding: 10px 20px; color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.3s; } .chip:hover { transform: scale(1.1); } .chip i { margin-right: 10px; } .chip .close { margin-left: 10px; font-size: 18px; color: #ffdddd; cursor: pointer; transition: transform 0.3s; } .chip .close:hover { transform: rotate(90deg); } </style> </head> <body> <div class="chips-container"> <div class="chip"> <i class="fas fa-star"></i> <span>Star</span> <span class="close">×</span> </div> <div class="chip"> <i class="fas fa-heart"></i> <span>Love</span> <span class="close">×</span> </div> <div class="chip"> <i class="fas fa-thumbs-up"></i> <span>Like</span> <span class="close">×</span> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.querySelectorAll('.chip .close').forEach(closeBtn => { closeBtn.addEventListener('click', function() { const chip = this.parentElement; chip.style.transform = 'scale(0)'; setTimeout(() => chip.remove(), 300); }); }); </script> </body> </html>