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

Ghost Button

Button 
<button
  type="button"
  style="display: inline-block; padding: 14px 28px; background: rgba(220, 20, 60, 0.1); border: 1px solid rgba(220, 20, 60, 0.3); color: #dc143c; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.3s ease;">
  Ghost Button
</button>
padding: 14px 28px;
background: rgba(220, 20, 60, 0.1);
border: 1px solid rgba(220, 20, 60, 0.3);
color: #dc143c;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;

Gradient Button

Button 
<button
  type="button"
  style="display: inline-block; padding: 14px 28px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; background: linear-gradient(135deg, #dc143c 0%, #ff6b6b 100%); color: #ffffff; box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);">
  Gradient Button
</button>
padding: 14px 28px;
border: none;
font-weight: 600;
font-size: 14px;
cursor: pointer;
background: linear-gradient(135deg, #dc143c 0%, #ff6b6b 100%);
color: #ffffff;
box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);

Outline Button

Button 
<button
  type="button"
  style="display: inline-block; padding: 12px 26px; background: transparent; border: 2px solid #dc143c; color: #dc143c; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease;">
  Outline Button
</button>
padding: 12px 26px;
background: transparent;
border: 2px solid #dc143c;
color: #dc143c;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;

Primary Button

Button 
<button
  type="button"
  style="display: inline-block; padding: 14px 28px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; background: #dc143c; color: #ffffff; box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3); transition: all 0.3s ease;">
  Click Me
</button>
padding: 14px 28px;
border: none;
font-weight: 600;
font-size: 14px;
cursor: pointer;
background: #dc143c;
color: #ffffff;
box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3);
transition: all 0.3s ease;

Secondary Button

Button 
<button
  type="button"
  style="display: inline-block; padding: 14px 28px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; background: rgba(0, 0, 0, 0.8); color: #ffffff; transition: all 0.3s ease;">
  Secondary Button
</button>
padding: 14px 28px;
border: none;
font-weight: 600;
font-size: 14px;
cursor: pointer;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
transition: all 0.3s ease;

Bordered Card

Card

Bordered Card

Add your card content here.

<div
  style="background: #ffffff; border: 2px solid #dc143c; box-shadow: 0 4px 12px rgba(220, 20, 60, 0.1); padding: 20px;">
  <h3 style="margin: 0 0 10px 0;">Bordered Card</h3>
  <p style="margin: 0;">Add your card content here.</p>
</div>
background: #ffffff;
border: 2px solid #dc143c;
box-shadow: 0 4px 12px rgba(220, 20, 60, 0.1);
padding: 20px;

Elevated Card

Card

Elevated Card

Add your card content here.

<div
  style="background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 25px;">
  <h3 style="margin: 0 0 10px 0;">Elevated Card</h3>
  <p style="margin: 0;">Add your card content here.</p>
</div>
background: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
padding: 25px;

Paper Card

Card

Paper Card

Add your card content here.

<div
  style="background: #ffffff; box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12); padding: 20px;">
  <h3 style="margin: 0 0 10px 0;">Paper Card</h3>
  <p style="margin: 0;">Add your card content here.</p>
</div>
background: #ffffff;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
            0 2px 2px rgba(0,0,0,0.12),
            0 4px 4px rgba(0,0,0,0.12),
            0 8px 8px rgba(0,0,0,0.12);
padding: 20px;

Simple Card

Card

Simple Card

Add your card content here.

<div
  style="background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); padding: 20px;">
  <h3 style="margin: 0 0 10px 0;">Simple Card</h3>
  <p style="margin: 0;">Add your card content here.</p>
</div>
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 20px;