self:inputs below require parent display to be grid, to style current
element give it a unique class
▼
▼
grid start:
🡙 row
🡘 column
grid end:
🡙 row
🡘 column
width
height
min-width
min-height
max-width
max-height
▼
gap:
flex or grid only for gap
🡙 row
🡘 column
margin:
left
right
top
bottom
padding:
left
right
top
bottom
▼
width:
left
right
top
bottom
radius:
top left
top right
bottom left
bottom right
color:
left color
right color
top color
bottom color
style:
▼
▼
▼
▼
width
offset
color
▼
▼
▼
▼
▼
Absolute, fixed, sticky or relative position needed.
z-index
▼
test cursor
▼
font-size
line-height
letter-spacing
▼
▼
alignment:
▼
▼
▼
▼
▼
transformation:
▼
decoration:
▼
▼
thickness
color
Applys to <li> elements or elements with display: list-item; Best applied to a
<ul> or <ol> parent element.
▼
▼
▼
text shadow color
blur
x
y
R G B A
box shadow color
x
y
blur
spread
R G B A
▼
▼
▼
▼
▼
▼
▼
▼
▼
▼
deg
🡘 X
🡙 Y
colour
stops:
▼
rotate
translate X
translate Y
scale X
scale Y
skew X
skew Y
origin X
origin Y
color:
R G B A
code
Press ESC to go back to Editor.
stay_current_portrait SM starts:tablet_mac MD starts:desktop_mac LG starts:
Drap & drop your projects zip folder onto this window.
WARNING!! this will overwite your current project. Click here to download a copy of your project.
Tutorial
test
Download optionsStandard Files: Basic HTML, CSS.Custom Element: Creates a custom element JS file with example HTML. Learn more about custom elementsOnce downloaded extract the zip file and double click the html file to see your creation. Both types include a
images folder and a JSON file which can be used to upload projects if you are registered.