×
Pick a widget from the left to begin.
< html/css >
Base
Hover & Press
Identity
Label
Class
*
kebab-case or snake_case
ID
Name
Size
Width
Height
Padding (horizontal)
Padding (vertical)
Colors
Background type
Solid
Linear gradient
End color
Gradient angle
Text color
Typography
Font size
Font weight
300 — Light
400 — Regular
500 — Medium
600 — Semibold
700 — Bold
800 — Extrabold
Border
Border radius
Border width
Border color
Effects
Box shadow
Y offset
Blur
Color
Transition
Duration
Easing
linear
ease
ease-in
ease-out
ease-in-out
Hover
End color
Text color
Border color
Lift
Scale
Shadow Y
Shadow blur
Cursor
pointer
default
not-allowed
wait
progress
help
grab
crosshair
text
none
Press
End color
Text color
Border color
Press depth
Scale
Shadow Y
Shadow blur
Export
HTML
CSS
Class name is required to export.
< html/css >
Base
Focus
Identity
Type
text
email
password
search
tel
url
Placeholder
Class
*
kebab-case or snake_case
ID
Name
Size
Width
Height
Padding (horizontal)
Padding (vertical)
Colors
Background color
Text color
Placeholder color
Typography
Font size
Font weight
300 — Light
400 — Regular
500 — Medium
600 — Semibold
700 — Bold
Border
Border radius
Border width
Border style
solid
dashed
dotted
double
none
Border color
Effects
Box shadow
Y offset
Blur
Color
Transition
Duration
Easing
linear
ease
ease-in
ease-out
ease-in-out
Focus
Background color
Text color
Border color
Border style
solid
dashed
dotted
double
none
Ring color
Ring width
Shadow Y
Shadow blur
Export
HTML
CSS
Class name is required to export.
< html/css >
Base
Hover
Identity
Class
*
kebab-case or snake_case
ID
Name
Size
Width
Height
Padding (horizontal)
Padding (vertical)
Colors
Background type
Solid
Linear gradient
End color
Gradient angle
Text color
Typography
Font size
Font weight
300 — Light
400 — Regular
500 — Medium
600 — Semibold
700 — Bold
Border
Border radius
Border width
Border color
Effects
Box shadow
Y offset
Blur
Color
Layout
Sample children
Sample count
Display
block
flex
grid
Overflow
visible
hidden
scroll
auto
Gap
Direction
row
column
row-reverse
column-reverse
Justify content
flex-start
center
flex-end
space-between
space-around
space-evenly
Align items
stretch
flex-start
center
flex-end
baseline
Wrap
nowrap
wrap
wrap-reverse
Columns
Transition
Duration
Easing
linear
ease
ease-in
ease-out
ease-in-out
Hover
End color
Border color
Lift
Scale
Shadow Y
Shadow blur
Export
HTML
CSS
Class name is required to export.