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

CSS Kinda Sucks

its just soincredibly tedious

who

wants

to

write

this

who wants

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); }

Wouldnt it be nice

if you could click

some arrows

and voilà CSS

Its 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

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.

video contains flashing images

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.

State

Create beautiful multi-property hover, focus, and active state transitions without the laborious juggling act of composing complex CSS state logic.

Full Feature Vertical Flick

Feature Flick

A feature packed speed-run made for mobile viewing — you can view, clone, or edit this style at exp001.10xCSS.com

interested?

not just another

10x demo---- claim

TRY THE DEMO

TRY

THE DEMO

the demo requires

no registration or assorted nonsense

just a viewport greater than 1024x640