Gradient Dots Hr - 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>Gradient Dots HR</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } .gradient-dots-hr { border: none; height: 4px; background: radial-gradient(circle, #ff6f91, #ff9671, #ffc75f, #f9f871); background-size: 400% 100%; animation: gradientMove 5s linear infinite; margin: 50px 0; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } </style> </head> <body> <h1>Gradient Dots Horizontal Rule</h1> <p>This horizontal rule features a moving gradient dot pattern.</p> <hr class="gradient-dots-hr"> </body> </html>