notes > 2025-07-css-recipes-from-claude-code

CSS recipes from Claude Code

Part of the series "One month of LLMs"

Dark theme

:root {
  --page-background: #1a1a1a; /* very dark gray */
  --element-background: #2d2d2d; /* dark gray */
  --border-color: #404040; /* lighter gray */
  --text-color: #e0e0e0; /* white */
  --blue: #0d6efd;
  --green: #198754;
}

Make an element glow

box-shadow plus a matching border/background color palette creates a glow effect.

.glow-yellow {
  border: 2px solid #ffc107;
  box-shadow: 0 2px 12px rgba(255, 193, 7, 0.4);
  background-color: #3a3520;
}

.glow-blue {
  border: 2px solid #0d6efd;
  box-shadow: 0 2px 12px rgba(13, 110, 253, 0.4);
  background-color: #1b263b;
}

.glow-green {
  border: 2px solid #198754;
  box-shadow: 0 2px 12px rgba(25, 135, 84, 0.4);
  background-color: #1e2d26;
}

.glow-red {
  border: 2px solid #dc3545;
  box-shadow: 0 2px 12px rgba(220, 53, 69, 0.4);
  background-color: #2e1e20;
}

Smooth hover-over

Use transition: all 0.2s ease to make the hover-over effect smoother, and add style with a slight box-shadow.

.card {
  transition: all 0.2s ease;
}

.card:hover {
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(13,110,253,0.3);
}

Attractive 'plus' button

A simple SVG graphic creates clean lines. transform: scale(1.1) and transition: all 0.2s ease to enlarge the icon slightly on hover.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
  stroke-linecap="round" stroke-linejoin="round" size="24">
  <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>

.plus-btn {
  transition: all 0.2s ease;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  cursor: pointer;


.plus-btn:hover {
  transform: scale(1.1);
  background-color: #404040;
}

Loading spinner

border-radius: 50% plus a thick border makes a circular element; change the color of part of it with border-top-color and use a CSS animation to make it spin.

.spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #404040;
    border-top: 8px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Modals

Make a modal overlay dialog with position: fixed and a semi-transparent background. Add a slight box-shadow to the element itself. (You'll need some JavaScript to create and dismiss it.)

<div class="modal-overlay">
  <div class="modal-content"></div>
</div>

.modal-overlay {
  /* fixed position, does not participate in regular layout */
  position: fixed;
  top: 0;
  left: 0;
  /* occupy the whole page */
  width: 100%;
  height: 100%;
  /* semi-transparent background so rest of page is still visible */
  background-color: rgba(0, 0, 0, 0.5);
  /* center content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  /* appear on top of other elements */
  z-index: 1000;
}

.modal-content {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
}

.error {
  background-color: rgba(255, 99, 99, 0.15);
  border: 1.5px solid rgba(255, 99, 99, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #d1d5db;
  padding: 14px 18px;
  border-radius: 12px;
  /* only if you allow message to appear on top of other elements */
  backdrop-filter: blur(10px);
}

Lorem ipsum

Table of contents