← All elements
<div class="al"><p style="--c:#2563eb">Update available.</p><p style="--c:#16a34a">Profile saved.</p><p style="--c:#d97706">Unsaved changes.</p><p style="--c:#dc2626">Connection lost.</p></div>About this layout
Four alert styles, info, success, warning and error, all driven by one custom property for the accent colour.
How it works
Each alert sets one custom property, --c, in its inline style. The left border uses it directly, and color-mix() blends it with white for a soft background and with black for dark, readable text. Changing one colour value therefore restyles the whole alert consistently.
Ways to customise it
- Change the four --c values for your own palette.
- Add a new alert by copying a paragraph and giving it a new colour.
- Adjust the percentages in color-mix() for stronger or lighter tints.
Good to know
Do not rely on colour alone to tell alert types apart, so keep words like Update or Error in the message. color-mix() is supported in current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.