Design for AI

Clay dark mode

Clay dark mode: a CSS button. Copy the rules, or the prompt that rebuilds it.

claymorphismroundeddarksoftinset-shadow

CSS
.btn-135 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #e2e8f0;
  background: #334155;
  border: 0;
  border-radius: 18px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: inset -5px -5px 12px #1e293b,inset 5px 5px 12px #475569,6px 6px 16px #0f172a99;
  transition: transform .2s,box-shadow .2s,color .2s
}
.btn-135:hover {
  color: #fff;
  transform: translateY(-2px)
}
.btn-135:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 3px
}
.btn-135:active {
  transform: scale(.97);
  box-shadow: inset -2px -2px 6px #1e293b,inset 2px 2px 6px #475569,2px 2px 6px #0f172a99
}
HTML
<button class="btn-135">Settings</button>
Prompt

A dark claymorphism button: slate #334155 with a lighter inset highlight top-left (#475569) and darker inset shade bottom-right (#1e293b), 12px blur, plus a deep drop shadow (6px 6px 16px, 60% #0f172a). 18px radius, #e2e8f0 15px semibold text, 15px by 28px padding. Hover brightens text to white and lifts 2px; active scales 0.97 and flattens the shadows. Focus 2px grey outline. For dark backgrounds.

Same shelf