CSS Tips and Styles - Color Picker

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.

Status Square Online

Other

Online

HTML Code:

<span style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;">
  <span style="width: 10px; height: 10px; background: #28a745; display: inline-block;"></span>
  <span style="color: #333;">Online</span>
</span>

CSS Code:

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

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

.status-text {
  color: #333;
}

Tag

Other

Design

HTML Code:

<span style="display: inline-block; background: rgba(0, 0, 0, 0.08); color: #333; padding: 6px 12px; font-size: 12px;">Design</span>

CSS Code:

.tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.08);
  color: #333;
  padding: 6px 12px;
  font-size: 12px;
}