Alerts & Notifications

◆CSS◆HTML◆UI◆Intermediate

10+ alert and notification patterns — variants, toasts, banners, dismissible, and inline alerts with icons.

Alert Variants

Success, error, warning, and info alerts with matching icons and colors.

alert-variants

Live

untitled.html

HTML

1	<div class="wrap">
2	<div class="alert success">
3	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
5	<polyline points="22 4 12 14.01 9 11.01"/>
6	</svg>
7	<span>
8	Settings saved successfully.
9	</span>
10	</div>
11	<div class="alert error">
12	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
13	<circle cx="12" cy="12" r="10"/>
14	<line x1="15" y1="9" x2="9" y2="15"/>
15	<line x1="9" y1="9" x2="15" y2="15"/>
16	</svg>
17	<span>
18	Failed to save. Please try again.
19	</span>
20	</div>
21	<div class="alert warning">
22	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
23	<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
24	<line x1="12" y1="9" x2="12" y2="13"/>
25	<line x1="12" y1="17" x2="12.01" y2="17"/>
26	</svg>
27	<span>
28	Your session will expire in 5 minutes.
29	</span>
30	</div>
31	<div class="alert info">
32	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
33	<circle cx="12" cy="12" r="10"/>
34	<line x1="12" y1="16" x2="12" y2="12"/>
35	<line x1="12" y1="8" x2="12.01" y2="8"/>
36	</svg>
37	<span>
38	A new update is available.
39	</span>
40	</div>
41	</div>

preview

Dismissible Alerts

Alerts with close button and optional undo action.

alert-dismiss

Live

untitled.html

HTML

1	<div class="wrap">
2	<div class="alert success">
3	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
5	<polyline points="22 4 12 14.01 9 11.01"/>
6	</svg>
7	<span class="flex-1">
8	Message sent successfully.
9	</span>
10	<button class="undo">
11	Undo
12	</button>
13	<button class="close">
14	×
15	</button>
16	</div>
17	<div class="alert warning">
18	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
19	<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
20	<line x1="12" y1="9" x2="12" y2="13"/>
21	<line x1="12" y1="17" x2="12.01" y2="17"/>
22	</svg>
23	<span class="flex-1">
24	Low disk space.
25	</span>
26	<button class="close">
27	×
28	</button>
29	</div>
30	</div>

preview

Banner Alerts

Full-width banners at the top of a section with title, description, and action.

alert-banner

Live

untitled.html

HTML

1	<div class="banner info">
2	<div class="b-content">
3	<div>
4	<strong>
5	New Feature
6	</strong>
7	<p>
8	Try our new dark mode editor with syntax highlighting and live preview.
9	</p>
10	</div>
11	<button class="b-btn">
12	Learn More
13	</button>
14	</div>
15	</div>
16	<div class="banner danger" style="margin-top:10px">
17	<div class="b-content">
18	<div>
19	<strong>
20	Action Required
21	</strong>
22	<p>
23	Your payment method is expiring soon. Update it to avoid service interruption.
24	</p>
25	</div>
26	<button class="b-btn">
27	Update Now
28	</button>
29	</div>
30	</div>

preview

Toast Notifications

Corner-positioned toast notifications with slide-in animation and auto-dismiss styling.

alerts-toast

Live

untitled.html

HTML

1	<div class="container">
2	<div class="toast success">
3	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
5	<polyline points="22 4 12 14.01 9 11.01"/>
6	</svg>
7	<div>
8	<strong>
9	Saved!
10	</strong>
11	<p>
12	Your changes have been saved.
13	</p>
14	</div>
15	</div>
16	<div class="toast error">
17	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
18	<circle cx="12" cy="12" r="10"/>
19	<line x1="15" y1="9" x2="9" y2="15"/>
20	<line x1="9" y1="9" x2="15" y2="15"/>
21	</svg>
22	<div>
23	<strong>
24	Error
25	</strong>
26	<p>
27	Could not connect to server.
28	</p>
29	</div>
30	<span class="t-close">
31	×
32	</span>
33	</div>
34	</div>

preview

Inline Alerts

Compact inline alerts for form fields and small UI areas.

alert-inline

Live

untitled.html

HTML

1	<div class="wrap">
2	<div class="inline error">
3	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4	<circle cx="12" cy="12" r="10"/>
5	<line x1="12" y1="8" x2="12" y2="12"/>
6	<line x1="12" y1="16" x2="12.01" y2="16"/>
7	</svg>
8	Please enter a valid email address.
9	</div>
10	<div class="inline success">
11	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
12	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
13	<polyline points="22 4 12 14.01 9 11.01"/>
14	</svg>
15	Username is available.
16	</div>
17	<div class="inline warning">
18	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
19	<circle cx="12" cy="12" r="10"/>
20	<line x1="12" y1="8" x2="12" y2="12"/>
21	<line x1="12" y1="16" x2="12.01" y2="16"/>
22	</svg>
23	Password must be at least 8 characters.
24	</div>
25	</div>

preview

X GitHub YouTube Instagram Facebook Buy me a coffee Sponsor

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	sans-serif;
9	background:#0D0D0D;
10	padding:24px
11	}
12	.wrap {
13	display:flex;
14	flex-direction:column;
15	gap:10px;
16	max-width:420px;
17	margin:16px auto
18	}
19	.alert {
20	display:flex;
21	align-items:center;
22	gap:10px;
23	padding:12px 16px;
24	border-radius:8px;
25	font-size:12px;
26	line-height:1.4
27	}
28	.alert svg {
29	flex-shrink:0
30	}
31	.success {
32	background:rgba(34,
33	197,
34	94,
35	.1);
36	border:1px solid rgba(34,
37	197,
38	94,
39	.2);
40	color:#22C55E
41	}
42	.error {
43	background:rgba(239,
44	68,
45	68,
46	.1);
47	border:1px solid rgba(239,
48	68,
49	68,
50	.2);
51	color:#EF4444
52	}
53	.warning {
54	background:rgba(234,
55	179,
56	8,
57	.1);
58	border:1px solid rgba(234,
59	179,
60	8,
61	.2);
62	color:#EAB308
63	}
64	.info {
65	background:rgba(59,
66	130,
67	246,
68	.1);
69	border:1px solid rgba(59,
70	130,
71	246,
72	.2);
73	color:#3B82F6
74	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	sans-serif;
9	background:#0D0D0D;
10	padding:24px
11	}
12	.wrap {
13	display:flex;
14	flex-direction:column;
15	gap:10px;
16	max-width:420px;
17	margin:16px auto
18	}
19	.alert {
20	display:flex;
21	align-items:center;
22	gap:10px;
23	padding:12px 16px;
24	border-radius:8px;
25	font-size:12px;
26	line-height:1.4;
27	transition:all .3s ease
28	}
29	.alert svg {
30	flex-shrink:0
31	}
32	.flex-1 {
33	flex:1
34	}
35	.success {
36	background:rgba(34,
37	197,
38	94,
39	.1);
40	border:1px solid rgba(34,
41	197,
42	94,
43	.2);
44	color:#22C55E
45	}
46	.warning {
47	background:rgba(234,
48	179,
49	8,
50	.1);
51	border:1px solid rgba(234,
52	179,
53	8,
54	.2);
55	color:#EAB308
56	}
57	.close {
58	background:none;
59	border:none;
60	color:inherit;
61	font-size:18px;
62	cursor:pointer;
63	opacity:.5;
64	padding:0 2px;
65	line-height:1
66	}
67	.close:hover {
68	opacity:1
69	}
70	.undo {
71	background:transparent;
72	border:1px solid currentColor;
73	border-radius:4px;
74	padding:3px 8px;
75	font-size:10px;
76	font-weight:600;
77	cursor:pointer;
78	color:inherit;
79	opacity:.7
80	}
81	.undo:hover {
82	opacity:1
83	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	sans-serif;
9	background:#0D0D0D;
10	padding:24px
11	}
12	.banner {
13	border-radius:10px;
14	padding:16px 20px;
15	max-width:520px;
16	margin:16px auto 0
17	}
18	.b-content {
19	display:flex;
20	align-items:center;
21	justify-content:space-between;
22	gap:16px
23	}
24	.b-content strong {
25	font-size:13px;
26	display:block;
27	margin-bottom:4px
28	}
29	.b-content p {
30	font-size:11px;
31	margin:0;
32	opacity:.8;
33	line-height:1.4
34	}
35	.info {
36	background:rgba(59,
37	130,
38	246,
39	.1);
40	border:1px solid rgba(59,
41	130,
42	246,
43	.2);
44	color:#3B82F6
45	}
46	.danger {
47	background:rgba(239,
48	68,
49	68,
50	.1);
51	border:1px solid rgba(239,
52	68,
53	68,
54	.2);
55	color:#EF4444
56	}
57	.b-btn {
58	padding:8px 16px;
59	border-radius:6px;
60	font-size:11px;
61	font-weight:600;
62	cursor:pointer;
63	border:1.5px solid currentColor;
64	background:transparent;
65	color:inherit;
66	white-space:nowrap;
67	transition:all .2s
68	}
69	.b-btn:hover {
70	background:rgba(255,
71	255,
72	255,
73	.1)
74	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	sans-serif;
9	background:#0D0D0D;
10	padding:24px
11	}
12	.container {
13	position:relative;
14	min-height:200px
15	}
16	.toast {
17	display:flex;
18	align-items:flex-start;
19	gap:10px;
20	padding:14px;
21	border-radius:10px;
22	max-width:340px;
23	margin:12px auto;
24	box-shadow:0 8px 24px rgba(0,
25	0,
26	0,
27	.3);
28	animation:slideUp .3s ease
29	}
30	@keyframes slideUp {
31	from {
32	opacity:0;
33	transform:translateY(16px)
34	}
35	to {
36	opacity:1;
37	transform:translateY(0)
38	}
39	}
40	.toast svg {
41	flex-shrink:0;
42	margin-top:2px
43	}
44	.toast strong {
45	font-size:12px;
46	display:block
47	}
48	.toast p {
49	font-size:11px;
50	margin:2px 0 0;
51	opacity:.8
52	}
53	.success {
54	background:#0A1A0A;
55	border:1px solid rgba(34,
56	197,
57	94,
58	.3);
59	color:#22C55E
60	}
61	.error {
62	background:#1A0A0A;
63	border:1px solid rgba(239,
64	68,
65	68,
66	.3);
67	color:#EF4444
68	}
69	.t-close {
70	margin-left:auto;
71	cursor:pointer;
72	opacity:.5;
73	font-size:18px;
74	line-height:1
75	}
76	.t-close:hover {
77	opacity:1
78	}

1	* {
2	margin:0;
3	padding:0;
4	box-sizing:border-box
5	}
6	body {
7	font-family:system-ui,
8	sans-serif;
9	background:#0D0D0D;
10	padding:24px
11	}
12	.wrap {
13	display:flex;
14	flex-direction:column;
15	gap:8px;
16	max-width:380px;
17	margin:16px auto
18	}
19	.inline {
20	display:flex;
21	align-items:center;
22	gap:6px;
23	padding:8px 12px;
24	border-radius:6px;
25	font-size:11px;
26	line-height:1.3
27	}
28	.inline svg {
29	flex-shrink:0
30	}
31	.error {
32	background:rgba(239,
33	68,
34	68,
35	.08);
36	color:#EF4444
37	}
38	.success {
39	background:rgba(34,
40	197,
41	94,
42	.08);
43	color:#22C55E
44	}
45	.warning {
46	background:rgba(234,
47	179,
48	8,
49	.08);
50	color:#EAB308
51	}