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 real-time, fine-grained property control 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 start, so there’s no time-consuming design-to-code roundabout—just 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

10xCSS

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 UI application and web design/development framework that streamlines the iterative processes of creating, refining, and interacting with CSS

Feature

GIFS

#teaser-vid-play { display:none } #video_teaser { display:block !important; opacity:1 !important; }

Styles

Create your own 10xCSS skeleton style, clone one from the community, or remix one of the hundreds of ready-made 10xCSS styles. From the number and type of editable CSS properties to the HTML composition, you’re in complete control.

video contains flashing images

Widgets

Each widget is designed to deliver a rich, dynamic interface with a high degree of functionality. From colors to dimensions and the border radii in between, 10xCSS has just about every widget under the box-shadow.

Code

With shippable CSS just a click away, there’s no need to go through the tedious design-to-code roundabout. Simply iterate, find the perfect look and feel, click copy, and call it a day.

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 variations. It’s as easy as, One button, Two button, Red button, Blue button.