Skip to content

Alert Shake

A copy-paste toasts & alerts component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Toasts & AlertsHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-alert-shake" role="alert">
  <span class="nuda-alert-shake__icon">&#9888;</span>
  <span class="nuda-alert-shake__text">Something went wrong. Please try again.</span>
</div>
CSS
/* Alert Shake
   Alert box with attention-grabbing shake animation.
   Customize: --alert-color, --alert-bg */

.nuda-alert-shake {
  --alert-color: #ff5454;
  --alert-bg: rgba(255, 84, 84, 0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--alert-bg);
  border: 1px solid rgba(255, 84, 84, 0.2);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  animation: nuda-alert-shake-anim 0.5s ease-in-out;
}

.nuda-alert-shake__icon {
  color: var(--alert-color);
  font-size: 1rem;
}

.nuda-alert-shake__text {
  color: #eee;
  font-size: 0.85rem;
}

@keyframes nuda-alert-shake-anim {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-alert-shake {
    animation: none;
  }
}

How to use Alert Shake

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More toasts & alerts components

← Browse all NudaUI components