CSS GUIv0.0.61

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 />

Font size

.css-gui-element {
  font-size: 64px;
}

<Inputs.FontFamily />

.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 />

Color

.css-gui-element {
  color: #6465ff;
}

<Inputs.BackgroundImage />

Background Image

.css-gui-element {
  background-image: url(https://source.unsplash.com/random);
}

<Inputs.Background />

Background

.css-gui-element {
  background: url(https://source.unsplash.com/random) center center / 100% 100% no-repeat no-repeat fixed border-box border-box;
}

<Inputs.BackgroundBlendMode />

Background blend mode

.css-gui-element {
  background-blend-mode: overlay;
}

<Inputs.BorderRadius />

Border radius

.css-gui-element {
  border-radius: 100%;
}

<Inputs.Filter />

Filter

.css-gui-element {
  filter: blur(4px);
}

View more properties

Composable

Mix and match controls to create your own custom component design interfaces.

Color

Background color

.css-gui-element {
  font-size: 12rem;
  color: #ff00ff;
  background-color: #000000;
}

Link

Link :link

Color

Background color

Border color

Hover :hover

Color

Background color

Border color

Focus :focus

Color

Background color

Border color

Visited :visited

Color

Background color

Border color

.css-gui-element {
  color: #ff00ff;
  background-color: #000000;
  border-color: goldenrod;
  border-width: 24px;
  border-style: solid;
  font-size: 12rem;
  hover: [object Object];
  focus: [object Object];
  visited: [object Object];
  transition: all 250ms cubic-bezier(0.16, 0.67, 0.83, 0.67) 0ms;
}

A cool title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Color

Background color

Border image slice

Border image width

Border Image

Font size

Text align

Display

Box shadow

Width

Padding

.css-gui-element {
  font-family: Space Mono;
  font-size: 32px;
  line-height: 1.5;
  text-align: start;
  color: #000;
  background-color: #fff;
  margin: 0px;
  height: auto;
  display: block;
  min-height: 0px;
  max-height: auto;
  width: 100%;
  border-style: solid;
  border-width: 0px;
  border-color: transparent;
  box-sizing: border-box;
  border-image-slice: 1;
  border-image-width: 64px;
  overflow: hidden;
  border-image-source: url(https://source.unsplash.com/random);
  padding: 128px;
}