Full Screen
ALT+/
ShortCuts
Export
Export
Source
Save
Language
English
Français
Korean
elf document
Github
Learn
Rect Layer
R
Circle Layer
O
Image
I
Video
V
IFrame
F
SampleLayer
Pen
P
Pencil
B
Rectangle
⇧ R
Circle
⇧ O
Polygon
⇧ P
Star
⇧ S
Spline
⇧ L
TextPath
⇧ T
Project
New Project
Layers
Search
Gradient
Linear
Random Linear
Repeat Linear
Radial
Random Radial
Repeat Radial
Conic
Random Conic
Repeat Conic
Linear
Pattern
ida97a889
check
Image
Video
Custom Assets
Done
Tolerance
Stroke
black
Width
Cap
butt
round
square
normal
Join
miter
bevel
round
normal
Done
2x
3x
-50
0
50
100
150
0
10
20
30
40
50
60
70
80
90
100
x: 0, y: 0, 0 x 0
x: 0, y: 0
$
%
Design
Animation
Code
To Front
To Back
To First
To Last
X
Y
W
H
deg
opacity
Layout
Resizing
Fixed Width
Hug Content
Fixed Width
Fixed Height
Hug Content
Fixed Height
Self Resizing
Fixed Width
Fill Container
Fixed Width
Fixed Height
Fill Container
Fixed Height
Constraints
Left
Right
Left and Right
Center
Scale
Left
Top
Bottom
Top and Bottom
Center
Scale
Top
Box Model
Union
Intersection
Subtract
Exclude
Self Intersection
Flatten
Switch path
Outline Path
ArtBoard Preset
Web
Apple Devices
Android Devices
Web
Landscape
Web Small
1024x600
Web Medium
1280x800
Web Large
1440x900
Web X Large
1920x1200
Portrait
Web Small
600x1024
Web Medium
800x1280
Web Large
900x1440
Web X Large
1200x1920
SVG Text Style
Text Area
Text Anchor
start
middle
end
Length Adjust
spacing
spacingAndGlyphs
spacing
Text Length
px
em
%
number
Start Offset
px
em
%
number
Font
Text Style
Text Shadows
Mystic
Appearance
Component
Fill
Pattern
Border
none
hidden
solid
dashed
dotted
double
groove
ridge
inset
outset
solid
Border Radius
px
em
%
auto
px
TL
px
em
%
auto
px
TR
px
em
%
auto
px
BL
px
em
%
auto
px
BR
px
em
%
auto
px
Video
Play
Pause
Volume
Playback Rate
Play Time Distance
Start
End
Image
Appearance
Filter
Blur
GrayScale
Hue Rotate
Invert
Brightness
Contrast
Drop Shadow
Opacity
Saturate
Sepia
SVG
Backdrop Filter
Blur
GrayScale
Hue Rotate
Invert
Brightness
Contrast
Drop Shadow
Opacity
Saturate
Sepia
SVG
Box Shadows
Box
Shadow-4
Clip Path
Export
SVG
Download
PNG
Download
CSS Transition
CSS Keyframe
CSS Animation
Selector
selector
:hover
:active
:before
:after
:first-child
:last-child
:link
:active
:focus
normal
CodeView
Export
HTML
CSS
SVG Image
Mini Editor
Project Manager
Project Menu
Project List
ShortCuts
Tool
Add ArtBoard
A
Add ArtBoard
A
Draw SVG Path
B
Add circle layer
O
Add circle layer
L
Add SVG Path layer
P
Add rect layer
R
Add rect layer
M
Add rect layer
R
Add text layer
T
None selection
ESCAPE
Selection all layers
⌘
+
A
Selection
V
Show panning area
SPACE
Edit
Copy objects
⌘
+
C
Paste selected objects
⌘
+
V
Group
Grouping selected items
⌘
+
G
Ungrouping selected group layer
SHIFT
+
⌘
+
G
History
redoing in history
⌘
+
SHIFT
+
Z
undoing in history
⌘
+
Z
Layer
move 5px to down
ALT
+
→
move 5px to left
ALT
+
←
move 5px to right
ALT
+
→
move 5px to up
ALT
+
↑
move layer to below
[
move layer to above
]
move 1px to down
→
move 1px to left
←
move 1px to right
→
move 1px to up
↑
move 10px to down
SHIFT
+
→
move 10px to left
SHIFT
+
←
move 10px to right
SHIFT
+
→
move 10px to up
SHIFT
+
↑
rotate to left
META
+
←
rotate to right
META
+
→
Delete selected items
⌫
Delete selected items
DELETE
Path
Delete selected segment
⌫
move 5px to down
ALT
+
→
move 5px to left
ALT
+
←
move 5px to right
ALT
+
→
move 5px to up
ALT
+
↑
move 1px to down
→
move 1px to left
←
move 1px to right
→
move 1px to up
↑
move 10px to down
SHIFT
+
→
move 10px to left
SHIFT
+
←
move 10px to right
SHIFT
+
→
move 10px to up
SHIFT
+
↑
Tools
set hand tool on
H
set hand tool on
H
View
zoom by scale 1
0
zoom in
EQUAL
zoom Out
MINUS
ColorPicker
HEX
R
G
B
A
H
%
S
%
L
A
material amber
material blue
material bluegray
material brown
material cyan
material deep orange
material deep purple
material gray
material green
material indigo
material light blue
material lightgreen
material lime
material orange
material pink
material purple
material red
material teal
material yellow
opencolor gray
random
random
Static
Linear Gradient
Radial Gradient
Image
Static
0
100
Pattern
userSpaceOnUse
normal
HEX
R
G
B
A
H
%
S
%
L
A
material amber
material blue
material bluegray
material brown
material cyan
material deep orange
material deep purple
material gray
material green
material indigo
material light blue
material lightgreen
material lime
material orange
material pink
material purple
material red
material teal
material yellow
opencolor gray
random
random
Static
Linear Gradient
Radial Gradient
Conic Gradient
Repeating Linear Gradient
Repeating Radial Gradient
Repeating Conic Gradient
Image
Static
0
HEX
R
G
B
A
H
%
S
%
L
A
material amber
material blue
material bluegray
material brown
material cyan
material deep orange
material deep purple
material gray
material green
material indigo
material light blue
material lightgreen
material lime
material orange
material pink
material purple
material red
material teal
material yellow
opencolor gray
random
random
Component
Background Pattern
Size
contain
cover
auto
auto
X
px
em
%
auto
px
Y
px
em
%
auto
px
W
px
em
%
auto
px
H
px
em
%
auto
px
Repeat
Pattern Info
grid
Width
px
em
%
auto
px
Height
px
em
%
auto
px
Line Width
px
em
%
auto
Line Height
px
em
%
auto
Fore
Back
Blend Mode
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
normal
Select a image
SVG Filter
Filter
Preset
Assets
Source Graphic
Source Alpha
Background Image
Background Alpha
Fill Paint
Stroke Paint
Flood
Turbulence
Image
Color Matrix
Saturate
HueRotate
LuminanceToAlpha
Drop Shadow
Morphology
Convolve Matrix
Offset
Gaussian Blur
Tile
Specular Lighting
Diffuse Lighting
Point Light
Spot Light
Distant Light
Blend
Composite
Merge
DisplacementMap
Grayscale
Shadow
Inner Shadow
Stroke
Dancing Stroke
Transition
Property
none
all
background-color
background-position
background-size
border
border-color
border-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
color
filter
font-size
font-size-adjust
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration
text-decoration-color
text-indent
text-shadow
top
transform
vertical-align
visibility
width
word-spacing
z-index
all
Timing function
Delay
s
ms
s
Duration
s
ms
s
Keyframe
Name
Offset
%
Properties
x
y
width
height
margin-left
margin-right
margin-bottom
margin-top
padding-left
padding-right
padding-bottom
padding-top
border
border-radius
background-color
background-image
box-shadow
text-shadow
filter
backdrop-filter
mix-blend-mode
transform
transform-origin
perspective
perspective-origin
font-size
font-weight
timing-function
Animation
Keyframe
Select a keyframe
Timing Function
Iteration
normal
infinite
number
Delay
s
ms
px
Duration
s
ms
px
Direction
normal
reverse
alternate
alternate-reverse
normal
Fill Mode
none
forwards
backwards
both
normal
Play State
paused
running
normal
Selector Property
Selector
Properties
x
y
width
height
margin-left
margin-right
margin-bottom
margin-top
padding-left
padding-right
padding-bottom
padding-top
border
border-radius
background-color
background-image
box-shadow
text-shadow
filter
backdrop-filter
mix-blend-mode
transform
transform-origin
perspective
perspective-origin
font-size
font-weight
timing-function