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

Input Field

Other 
<input
  type="text"
  placeholder="Enter text..."
  style="background: #f5f5f5; border: 2px solid transparent; padding: 14px 18px; font-size: 16px; width: 100%; outline: none; box-sizing: border-box; transition: all 0.3s ease;" />
background: #f5f5f5;
border: 2px solid transparent;
padding: 14px 18px;
font-size: 16px;
width: 100%;
outline: none;
box-sizing: border-box;
transition: all 0.3s ease;

Input Focus Style

Other 
<input
  type="text"
  placeholder="Focus me..."
  style="background: #f5f5f5; border: 2px solid transparent; padding: 14px 18px; font-size: 16px; width: 100%; outline: none; box-sizing: border-box; transition: all 0.3s ease;"
  onfocus="this.style.background='#ffffff'; this.style.border='2px solid #ddd';"
  onblur="this.style.background='#f5f5f5'; this.style.border='2px solid transparent';"
/>
background: #ffffff;
border: 2px solid #ddd;
padding: 14px 18px;
font-size: 16px;
width: 100%;
outline: none;
box-sizing: border-box;
transition: all 0.3s ease;

Input Underline

Other 
<input
  type="text"
  placeholder="Enter text..."
  style="background: transparent; border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.2); padding: 14px 4px; font-size: 16px; width: 100%; outline: none; box-sizing: border-box; transition: all 0.3s ease;" />
background: transparent;
border: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding: 14px 4px;
font-size: 16px;
width: 100%;
outline: none;
box-sizing: border-box;
transition: all 0.3s ease;

Progress Bar

Other 
<div style="background: rgba(0, 0, 0, 0.1); height: 8px; width: 100%; overflow: hidden;">
  <div style="background: linear-gradient(90deg, #dc143c, #ff6b6b); height: 100%; width: 90%;"></div>
</div>
.progress-track {
  background: rgba(0, 0, 0, 0.1);
  height: 8px;
  width: 100%;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, #dc143c, #ff6b6b);
  height: 100%;
}

Quote Block

Other

"Design is not just what it looks like. Design is how it works." -Steve Jobs 

<p style="margin: 0; background: rgba(220, 20, 60, 0.05); border-left: 4px solid #dc143c; padding: 20px 25px; font-style: italic; color: #555;">
  "Design is not just what it looks like. Design is how it works." -Steve Jobs
</p>
background: rgba(220, 20, 60, 0.05);
border-left: 4px solid #dc143c;
padding: 20px 25px;
font-style: italic;
color: #555;

Quote Simple

Other

"Simplicity is the ultimate sophistication." 

<p style="margin: 0; border-left: 3px solid #333; padding: 15px 20px; color: #555; font-style: italic;">
  "Simplicity is the ultimate sophistication."
</p>
border-left: 3px solid #333;
padding: 15px 20px;
color: #555;
font-style: italic;

Spinner

Other 
<div style="width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #dc143c; animation: spin 1s linear infinite; margin: 20px auto;"></div>
<style>
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #dc143c;
animation: spin 1s linear infinite;
margin: 20px auto;

Status Square Away

Other
Away 
<span style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;">
  <span style="width: 10px; height: 10px; background: #ffc107; display: inline-block;"></span>
  <span style="color: #333;">Away</span>
</span>
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  background: #ffc107;
  display: inline-block;
}

.status-text {
  color: #333;
}

Status Square Offline

Other
Offline 
<span style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;">
  <span style="width: 10px; height: 10px; background: #dc3545; display: inline-block;"></span>
  <span style="color: #333;">Offline</span>
</span>
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.status-dot-offline {
  width: 10px;
  height: 10px;
  background: #dc3545;
  display: inline-block;
}

.status-text {
  color: #333;
}