CSS Tips and Styles

Color PickerColor WheelAdmin Login

Browse CSS Styles

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

Alert Warning

Other
Warning: Please double-check your input before continuing. 
<div
  style="background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-left: 4px solid #ffc107; padding: 15px 20px; color: #856404;">
  Warning: Please double-check your input before continuing.
</div>
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
border-left: 4px solid #ffc107;
padding: 15px 20px;
color: #856404;

Avatar

Other
AB 
<div
  style="width: 60px; height: 60px; background: linear-gradient(135deg, #dc143c, #ff6b6b); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 24px; border-radius: 50%;">
  AB
</div>
width: 60px;
height: 60px;
background: linear-gradient(135deg, #dc143c, #ff6b6b);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 24px;

Avatar Dark

Other
CD 
<div
  style="width: 60px; height: 60px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 24px; border-radius: 50%;">
  CD
</div>
width: 60px;
height: 60px;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 24px;

Badge

Other
NEW 
<span
  style="display: inline-block; background: #dc143c; color: #ffffff; padding: 6px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 999px;">
  NEW
</span>
display: inline-block;
background: #dc143c;
color: #ffffff;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;

Badge Outline

Other
SALE 
<span
  style="display: inline-block; background: transparent; color: #dc143c; padding: 5px 13px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 2px solid #dc143c; border-radius: 999px;">
  SALE
</span>
display: inline-block;
background: transparent;
color: #dc143c;
padding: 5px 13px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid #dc143c;

Divider Dotted

Other 
<div style="border-bottom: 2px dotted rgba(0, 0, 0, 0.2); margin: 20px 0;"></div>
border-bottom: 2px dotted rgba(0, 0, 0, 0.2);
margin: 20px 0;

Divider Gradient

Other 
<div style="height: 2px; background: linear-gradient(90deg, transparent, #dc143c, transparent); margin: 20px 0;"></div>
height: 2px;
background: linear-gradient(90deg, transparent, #dc143c, transparent);
margin: 20px 0;

Divider Solid

Other 
<div style="height: 1px; background: rgba(0, 0, 0, 0.1); margin: 20px 0;"></div>
height: 1px;
background: rgba(0, 0, 0, 0.1);
margin: 20px 0;

Gradient Border

Other
Gradient Border Box 
<div
  style="background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #dc143c, #ff6b6b, #feca57) border-box; border: 3px solid transparent; padding: 25px; text-align: center; color: #333; border-radius: 12px;">
  Gradient Border Box
</div>
background: linear-gradient(#fff, #fff) padding-box,
            linear-gradient(135deg, #dc143c, #ff6b6b, #feca57) border-box;
border: 3px solid transparent;
padding: 25px;
text-align: center;
color: #333;