Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CSS3 Playground


This is a client side only web application for trying out different css styles. It was primarily created to demonstrate new css3 functionality and does now also support touch devices such as iPhone, iPad and Android browsers.

Use this web application live at

Blog post describing the start of this project at

Facebook Page for this project at

Version 1.4 (2010-10-02)

  • Outline setting: a border that does not affect the width/positioning of a box (prior to css3, but I got wind of it now).

  • Column setting: let the browser distribute the contents over columns automatically.

  • Gradient backgrounds: added setting for start and end position (relative) for the fill.

  • Touch support, so that sliders and moving the box can be done on touch devices/tablets like the iPad. (TouchProxy class in touch-helpers.js)

  • Touch support, so that panels that don't fit the height can be scrolled by touch-n-drag. (TouchScroller class in touch-helpers.js)

  • Removed “hidden size grip until mouseover” for touch supporting devices so that they too can resize by draging the grip.

Version 1.3 (2010-09-14)

  • Gradient background images (with css).

  • Changed Facebook Like-button to a Facebook Page instead of just the url.

  • JavaScript code change: Refactored the settings code into separate classes.

  • Moved styles into separate file style.css.

  • Moved box and settings code into separate file box-settings.js.

Version 1.2 (2010-09-05)

  • Output box-shadow and text-shadow even when shadow offset is zero.

  • Button to copy current styles to clipboard.

  • Opacity setting.

  • Z-index setting.

  • Update slider position when text box value changes.

  • Only show sizing handle (in lower right corner of box) when mouse is inside box.

Version 1.1 (2010-08-17)

  • Multiple boxes, buttons for adding and deleting.

  • Selection intelligence to show and update one (last clicked) of the boxes.

  • Font family, bold, italic and color setting.

  • Padding setting.

Version 1.0 (2010-07-24)

  • Immediate update of box (div tag) style settings when input controls changes.

  • Show settings as browser independent styles.

  • Show current styles as reported by the browser (browser specific styles).

  • Border radius setting.

  • Box shadow setting.

  • Text shadow setting.

  • Transform (scale, rotate, skew) settings.

  • Border and background settings.

  • Content.

  • Font size setting.

  • Text alignment setting.

  • About information with Facebook Like-button, Flattr-button and Paypal donate-button.


Experiment with css3 styles directly in the browser



No releases published


No packages published