Developer Tools

14 visual generators, one page

Design buttons, cards, shadows, gradients and more with live previews — then copy the Tailwind classes or CSS straight into your project.

UI Elements

Effects & Styles

Backgrounds

Button Generator

Colors, radius, padding, shadow and hover effects.

Background

Text color

Radius8px

Padding X20px

Padding Y10px

Font size14px

Shadow

Hover effect

Tailwind CSS (Click to copy)

bg-[#18181b] text-[#ffffff] rounded-[8px] px-[20px] py-[10px] text-[14px] font-medium shadow-md transition-all duration-200 hover:brightness-90

CSS (Click to copy)

background: #18181b;
color: #ffffff;
border-radius: 8px;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
transition: all 0.2s;