Component Builder

Tweak controls → get clean CSS and Tailwind output instantly

Element

Label Text

Colors

Background

#6C63FF

Text Color

#ffffff

Gradient

Shape

Border Radius12

Font Size15

Padding X24

Padding Y12

Shadow

Hover Effect

Live Preview

Click Me

Hover over the preview to see hover effects

.my-element {
  background: #6C63FF;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-block;
}
.my-element:hover {
  box-shadow: 0 0 0 3px #6C63FF44, 0 0 24px #6C63FF66;
  transform: translateY(-2px);
}