CSS GUIv0.0.241DocsPropertiesGitHubLog inSign up

CSS GUIv0.0.241

A composable, extensible, and themeable controls for visually editing CSS.

Everyone should be able to explore the creative potential of CSS. This project is a growing set of parametric controls for rapidly editing CSS properties. Designed for composability, mix and match any combination of properties to create custom components and tap into the vast and beautiful world of CSS.

Install

npm install --save @compai/css-gui

Demo

Codesandbox

Features

  • Controls for 280 CSS properties
  • +1000 Google Fonts
  • Full variable fonts support
  • Responsive value arrays
  • Theme aware inputs
  • Scrubbable number inputs
  • Supports all CSS units
  • Advanced layer based gradient editor
  • Nested elements
  • Cubic bezier editor for custom easings
  • Style pseudo-elements and pseudo-classes
  • Completely open source

Demo

Previews of CSS controls

<Inputs.FontSize />

Aa

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

Aa

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

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

Text align
<Inputs.Color />

Aa

Color
.css-gui-element {
  color: #6465ff;
}
<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.BorderRadius />
Border radius
.css-gui-element {
  border-radius: 100%;
}
<Inputs.Filter />
Filter
0
blur()
.css-gui-element {
  filter: blur(4px);
}
View more properties