Instant CSS
Tools
Templates
Components
Learn
More
Flash
Animation
Repeated fade in/out flash for warnings.
Reset to Default
HTML
Copy HTML
<div class="flash-badge">⚠ Warning</div>
CSS
Copy CSS
.flash-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; border-radius: 8px; font-family: sans-serif; font-weight: 700; animation: flash 1.5s ease-in-out infinite; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.25; } }
Live Preview
⚠ Warning
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.