Build your own 10xCSS style or start with a pre-built preset like this exact step style

Find the perfect look, feel, and style fit with fine-grained property control in real-time using real CSS

Create a shareable URL and PNG with the click of a button to get feedback and validate design iterations

Shippable CSS is generated from the outset, so there’s no timely design to code roundabout — simply copy or export the code and you’re good to go.what-you-see-is-what-you-get: {literally}

Create It

Iterate It

Validate It

Ship It

10 X

CSS

a web

devtool

for visual

iterative design

CSS Kinda Sucks

it’s just soincredibly tedious

who

want’s

write

this

who want’s

to write this


#The_Answer_Is_No_One {
  box-shadow: inset  2px  2.4px   9.2px  -2.2px rgba(32,34,34,0.33),
              inset  4px  3.6px  14.9px  -4.2px rgba(32,34,34,0.40),
              inset  5px    5px  21.4px  -7.5px rgba(32,34,34,0.48),
              inset  8px    8px  28.9px -14.2px rgba(32,34,34,0.57),
              inset -2px -2.4px   9.4px  -2.2px rgba(32,34,34,0.33),
              inset -4px -3.6px  15.9px  -4.2px rgba(32,34,34,0.40),
              inset -5px   -5px  23.1px  -7.5px rgba(32,34,34,0.48),
              inset -8px   -8px  31.7px -14.2px rgba(32,34,34,0.57);
}

Wouldn’t it be nice

if you could click

some arrows

and voilà CSS

It’s The Gist of

10XCSS

/tEn·Eks·sEE-Es-Es/

proper noun

A buildable WYSIWYG design/devtool application and framework that streamlines the iterative process of creating, developing, and interacting with CSS

Feature

GIFS

Styles

Clone a prefabricated 10xCSS style from your favorite framework, or build your own, with one editable property or one hundred. The philosophy of 10xCSS is simple, provide developers the flexibility they desire alongside the visual aids designers require.

Widgets

Every widget is tailor made to provide a rich interactive interface with a high-level of functionality and control. From colors to dimensions and the border radii in between, 10xCSS has just about every widget under the box-shadow.

Code

10xCSS is a code-first application with unfettered code access and no vendor lock-in. You can readily copy or export CSS/HTML assets with a few simple clicks, plus develop and compile 10xCSS styles outside the application.

History

A/B test component styles on a per-property basis, or group and assign the history value of multiple properties to create individual class renditions. It’s as easy as, One button, Two button, Red button, Blue button.