Achievement Unlock Glow

Feedback · community component

CSSMIT licenseUpdated today

◉ 1 views

Live

<!--
  Author: @tomoko
  License: MIT
  Tags: #css
-->
<div class="au-banner"><i class="au-glow"></i><span class="au-icon">*</span><div><strong>Achievement unlocked</strong><small>7-day streak completed</small></div></div>

/*
 * Author: @tomoko
 * License: MIT
 * Tags: #css
 */

.au-banner{position:relative;display:flex;align-items:center;gap:14px;width:320px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#78350f,#1c1917);color:#fef3c7;overflow:hidden}.au-glow{position:absolute;inset:-40%;background:radial-gradient(circle,rgba(251,191,36,.35),transparent 60%);animation:au-pulse 2.4s ease-in-out infinite}@keyframes au-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}.au-icon{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fbbf24;color:#451a03;font-size:20px;box-shadow:0 0 20px rgba(251,191,36,.6)}.au-banner strong{position:relative;display:block;font-size:13px}.au-banner small{position:relative;color:#fcd34d;font-size:11px}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryFeedback

AccessibilityKeyboard ready

Explore similar parts →

Created by

Tomoko Arai

@tomoko

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Tomoko Arai

Comments 0