Futuristic Paragraph - 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>Futuristic Paragraph</title> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); body { font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #0e0e0e; color: #fff; margin: 0; } .futuristic-paragraph-container { background: linear-gradient(135deg, #2a2a72 0%, #009ffd 100%); padding: 20px 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); overflow: hidden; transition: transform 0.5s ease; cursor: pointer; text-align: center; } .futuristic-paragraph-container:hover { transform: scale(1.05); } .futuristic-paragraph { font-size: 1.2em; font-weight: 400; position: relative; line-height: 1.5; } .futuristic-paragraph strong { font-weight: 700; color: #00e5ff; } .futuristic-paragraph .icon { color: #00e5ff; margin: 0 5px; animation: spin 1.5s infinite linear; } .futuristic-paragraph::before, .futuristic-paragraph::after { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.1) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%), linear-gradient(315deg, rgba(255,255,255,0.1) 25%, transparent 25%); background-size: 50px 50px; animation: rotate 6s linear infinite; } .futuristic-paragraph::after { filter: blur(10px); } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="futuristic-paragraph-container"> <div class="futuristic-paragraph"> <strong>🚀 Welcome to the Future 🚀</strong><br> This paragraph is designed with a futuristic aesthetic, combining sleek animations and vibrant colors to create a stunning visual experience. Your content will shine with <i class="fas fa-star icon"></i> style and <i class="fas fa-bolt icon"></i> energy. </div> </div> </body> </html>