CSS GUIv0.0.247 Docs Properties GitHub Log in Sign up

CSS GUIv0.0.247

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

url()

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

<Inputs.Background />

Background

Image

url()

Position

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

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

<Inputs.BorderRadius />

Border radius

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

<Inputs.Filter />

Filter

blur()

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

View more properties