Snapcode Ui
Layout
📦 Container (div)
📄 Section
📰 Article
Typography
🎯 Heading 1 (h1)
🎯 Heading 2 (h2)
📝 Paragraph (p)
✨ Span
Interactive
🔘 Button
📥 Input
📄 Textarea
Media
🖼️ Image
UI Canvas
Clear Canvas
Export Code
Drag elements here to start building your UI
Properties
Layers
Properties
No element selected
Layout & Sizing
Display
Default
Block
Inline Block
Inline
Flex
Grid
Hidden
Width
Auto
Full
1/2
1/3
1/4
Fit Content
Screen
Height
Auto
Full
Screen
Fit Content
32
64
Spacing
Padding
None
1
2
4
6
8
12
Margin
None
1
2
4
6
8
Auto
Background
Background Color
None
White
Black
Gray 50
Gray 100
Gray 200
Gray 500
Red 500
Blue 500
Green 500
Yellow 500
Purple 500
Pink 500
Background Opacity
100%
75%
50%
25%
10%
Gradient
None
Blue to Purple
Pink to Orange
Green to Blue
Yellow to Red
Border & Effects
Border
None
Default
2px
4px
Gray
Blue
Red
Radius
None
Small
Default
Large
XL
Full
Shadow
None
Small
Default
Large
XL
2XL
Typography
Text Color
Default
Black
White
Gray 500
Gray 700
Red 500
Blue 500
Green 500
Font Size
Default
XS
Small
Base
Large
XL
2XL
Font Weight
Default
Light
Normal
Semibold
Bold
Text Alignment
Default
Left
Center
Right
Justify
Flexbox
Justify
Default
Start
Center
End
Between
Around
Align Items
Default
Start
Center
End
Stretch
Flex Direction
Default
Row
Column
Row Reverse
Column Reverse
Hover Effects
Hover Background
None
Gray 100
Blue 100
Green 100
Red 100
Hover Transform
None
Scale Up
Scale Down
Move Up
Rotate
Transition
None
All
Colors
Transform
Content
Text Content
Delete Element
Layer Order
Drag layers to reorder elements. Top layers are in front.
Generated Code
Copy to Clipboard