Shadow Generator
Design CSS box-shadows.
Generate button HTML/CSS.
<button class="tb-btn" type="button">Button</button>
<style>
.tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
background: #6366f1;
border: 0px solid transparent;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
}
.tb-btn:hover {
background: #4f46e5;
}
.tb-btn:active {
transform: translateY(1px);
}
.tb-btn:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}
</style>Yes.
No.