CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Properties

Preview available controls from the library

<Inputs.FontSize />

Aa

Font size
.css-gui-element {
  font-size: 64px;
}
<Inputs.FontFamily />

Aa

.css-gui-element {
  font-family: Inter;
}
<Inputs.FontStyle />

Aa

Font style
.css-gui-element {
  font-style: italic;
}
<Inputs.FontWeight />

Aa

Font weight
.css-gui-element {
  font-weight: 100;
}
<Inputs.TextAlign />

The parameters comprise sequences which are theoretically infinite but limits are, of course, set to them in practice.

Text align
<Inputs.TextTransform />
A demo of the text-transform CSS property
Text transform
.css-gui-element {
  text-transform: uppercase;
}
<Inputs.LetterSpacing />
Anyone who would letter-space lower case would steal sheep.
Letter spacing
normal
.css-gui-element {
  font-family: Inter;
}
<Inputs.TextIndent />
A common stylistic choice for books and printed material. Indenting the first line of paragraphs is often used both digitally and in print when there is no vertical spacing between paragraphs.
Indent text forwards or backwards with positive and negative values. Paragraphs that are flush often have indented text.
Text indent
.css-gui-element {
  text-indent: 2em;
}
<Inputs.Color />
Aa
Color
.css-gui-element {
  color: #6465ff;
}
<Inputs.AlignItems />
Align items
.css-gui-element {
  align-items: center;
}
<Inputs.JustifyContent />
Justify content
.css-gui-element {
  justify-content: center;
}
<Inputs.FlexWrap />
1
2
3
4
Flex wrap
.css-gui-element {
  flex-wrap: nowrap;
}
<Inputs.FlexGrow />
1
2
3
Flex grow
.css-gui-element {
  flex-grow: 4;
}
<Inputs.FlexShrink />
1
2
3
Flex shrink
.css-gui-element {
  flex-shrink: 2;
}
<Inputs.FlexDirection />
1
2
3
Flex direction
.css-gui-element {
  flex-dirction: undefined;
}
<Inputs.BackgroundColor />
Background color
.css-gui-element {
  background-color: #6465ff;
}
<Inputs.BorderColor />
Aa
Border color
.css-gui-element {
  border-color: #6465ff;
}
<Inputs.TextDecorationColor />
Aa
Text decoration color
.css-gui-element {
  text-decoration-color: #6465ff;
}
<Inputs.TextDecorationLine />
Aa
Text decoration line
.css-gui-element {
  text-decoration-line: line-through;
}
<Inputs.TextDecorationStyle />
Aa
Text decoration style
.css-gui-element {
  text-decoration-style: double;
}
<Inputs.TextDecorationThickness />
Aa
Text decoration thickness
.css-gui-element {
  text-decoration-thickness: 8px;
}
<Inputs.AccentColor />
Accent color
.css-gui-element {
  accent-color: #6465ff;
}
<Inputs.BorderWidth />
Aa
Border width
.css-gui-element {
  border-width: 8px;
}
<Inputs.BorderStyle />
Aa
Border style
.css-gui-element {
  border-style: double double double double;
}
<Inputs.OutlineColor />
Aa
Outline color
.css-gui-element {
  outline-color: #6465ff;
}
<Inputs.OutlineWidth />
Aa
Outline width
.css-gui-element {
  outline-width: 2px;
}
<Inputs.OutlineStyle />
Aa
Outline style
.css-gui-element {
  outline-style: dashed;
}
<Inputs.OutlineOffset />
Aa
Outline offset
.css-gui-element {
  outline-offset: 6px;
}
<Inputs.BorderRadius />
Border radius
.css-gui-element {
  border-radius: 100%;
}
<Inputs.Filter />
Filter
0
blur()
.css-gui-element {
  filter: blur(4px);
}
<Inputs.BackgroundImage />
Background image
0
url()
.css-gui-element {
  background-image: url("https://source.unsplash.com/random");
}
<Inputs.Background />
Background
0
Image
url()
Position
X
Y
Size
Repeat
Attachment
Origin
Clip
.css-gui-element {
  background: url("https://source.unsplash.com/random") center center / 100% no-repeat fixed border-box border-box;
}
<Inputs.BackgroundBlendMode />
Background blend mode
0
.css-gui-element {
  background-blend-mode: overlay;
}
<Inputs.MixBlendMode />
Blend
Mix blend mode
.css-gui-element {
  mix-blend-mode: screen;
}
<Inputs.Opacity />
Opacity
.css-gui-element {
  opacity: 80%;
}
<Inputs.BoxShadow />
Box shadow
0
Inset
Color
Offset x
Offset y
Blur
Spread
Hover :hover
Box shadow
0
Inset
Color
Offset x
Offset y
Blur
Spread
1
Inset
Color
Offset x
Offset y
Blur
Spread
.css-gui-element {
  box-shadow:  #6465ff 0px 0px 0px 8px;
}

.css-gui-element:hover {
  box-shadow:  #f6e857 8px 8px 0px 8px,  #6016ee -8px -8px 0px 8px;
}
<Inputs.TextShadow />
Aa
Text shadow
0
Color
Offset x
Offset y
Blur
1
Color
Offset x
Offset y
Blur
Hover :hover
Text shadow
0
Color
Offset x
Offset y
Blur
1
Color
Offset x
Offset y
Blur
.css-gui-element {
  text-shadow: #254797 4px 4px 0px, #6465ff 8px 8px 0px;
}

.css-gui-element:hover {
  text-shadow: #6465ff 12px 12px 0px, #f6e857 24px 24px 0px;
}
<Inputs.Width />
Width
.css-gui-element {
  width: 50%;
}
<Inputs.Height />
Height
.css-gui-element {
  height: 50%;
}
<Inputs.Cursor />
Hover for cursor preview
Cursor
.css-gui-element {
  cursor: wait;
}