Feedback · community component

Cyberpunk Glitch Alert Banner

Attention-grabbing alert banner with energetic neon red border beam.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="glitchbanner-wrap"><span class="glitchbanner-title">CRITICAL</span><p>System overheat detected.</p></div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="glitchbanner-wrap"><span class="glitchbanner-title">CRITICAL</span><p>System overheat detected.</p></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.glitchbanner-wrap { width: 180px; background: #450a0a; border: 1px solid #ef4444; border-left: 4px solid #ef4444; padding: 8px 12px; border-radius: 6px; font-family: monospace; color: #fca5a5; margin: auto; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }
.glitchbanner-title { font-size: 8px; font-weight: 900; background: #ef4444; color: #000; padding: 1px 4px; border-radius: 2px; letter-spacing: 1px; }
.glitchbanner-wrap p { margin: 4px 0 0; font-size: 8px; font-weight: 700; }

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.glitchbanner-wrap { width: 180px; background: #450a0a; border: 1px solid #ef4444; border-left: 4px solid #ef4444; padding: 8px 12px; border-radius: 6px; font-family: monospace; color: #fca5a5; margin: auto; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }
.glitchbanner-title { font-size: 8px; font-weight: 900; background: #ef4444; color: #000; padding: 1px 4px; border-radius: 2px; letter-spacing: 1px; }
.glitchbanner-wrap p { margin: 4px 0 0; font-size: 8px; font-weight: 700; }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryFeedback

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.