Example custom CSS styles for morphism effects, dark themes, and more. Copy and use them in your projects. Some components may use rounded corners. If you need that, add border-radius: ...; to the CSS (for example, border-radius: 6px). If you would like to see something special added here, send an email to my AI assistant at ava@xcaliburmoon.net. The system will prioritize your request and notify me.
Showing 56 styles
Add your card content here.
<div style="background: #ffffff; border-top: 4px solid #dc143c; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px;"> <h3 style="margin: 0 0 10px 0;">Accent Card</h3> <p style="margin: 0;">Add your card content here.</p> </div>
background: #ffffff; border-top: 4px solid #dc143c; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px;
<div style="background: #e0e5ec; padding: 25px; font-size: 28px; font-weight: bold; color: #9e9e9e; text-shadow: 1px 1px 1px #fff, -1px -1px 1px rgba(0,0,0,0.1); text-align: center;"> Embossed Text </div>
background: #e0e5ec;
padding: 25px;
font-size: 28px;
font-weight: bold;
color: #9e9e9e;
text-shadow: 1px 1px 1px #fff,
-1px -1px 1px rgba(0,0,0,0.1);
text-align: center;
<div style="padding: 25px; font-size: 28px; font-weight: bold; background: linear-gradient(135deg, #dc143c, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center;"> Gradient Text </div>
padding: 25px; font-size: 28px; font-weight: bold; background: linear-gradient(135deg, #dc143c, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center;
<div style="background: #0a0a0a; padding: 25px; font-size: 28px; font-weight: bold; color: #fff; text-shadow: 0 0 10px #dc143c, 0 0 20px #dc143c, 0 0 40px #dc143c; text-align: center;"> Neon Text </div>
background: #0a0a0a;
padding: 25px;
font-size: 28px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #dc143c,
0 0 20px #dc143c,
0 0 40px #dc143c;
text-align: center;
<div style="padding: 25px; font-size: 28px; font-weight: bold; color: transparent; -webkit-text-stroke: 2px #dc143c; text-align: center;"> Outline Text </div>
padding: 25px; font-size: 28px; font-weight: bold; color: transparent; -webkit-text-stroke: 2px #dc143c; text-align: center;
<div style="background: #1a1a1a; padding: 25px; font-size: 28px; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); text-align: center;"> Shadow Text </div>
background: #1a1a1a; padding: 25px; font-size: 28px; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); text-align: center;
<div style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-left: 4px solid #dc3545; padding: 15px 20px; color: #721c24;"> Error: Something went wrong. Please try again. </div>
background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-left: 4px solid #dc3545; padding: 15px 20px; color: #721c24;
<div style="background: rgba(0, 123, 255, 0.1); border: 1px solid rgba(0, 123, 255, 0.3); border-left: 4px solid #007bff; padding: 15px 20px; color: #004085;"> Info: Here is an important update for you. </div>
background: rgba(0, 123, 255, 0.1); border: 1px solid rgba(0, 123, 255, 0.3); border-left: 4px solid #007bff; padding: 15px 20px; color: #004085;
<div style="background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); border-left: 4px solid #28a745; padding: 15px 20px; color: #155724;"> Success: Your changes have been saved. </div>
background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); border-left: 4px solid #28a745; padding: 15px 20px; color: #155724;