Thursday, May 23, 2024

Review: CSS Playground

In this article we look at CSS3 Playground, another web-based tool for creating CSS3 Layouts.

On the interface you’ll notice several different options for manipulating CSS: These are: CSS3 Radius and Box Shadow, CSS3 Text Shadow, CSS3 Transforms, CSS3 Columns, CSSx Gradient Background, Border and Outline, Background+ and Content and Text.

On the far left of this interace you have access to several types of CSS control panels. Clicking on each one will bring up a different panel and the corresponding controls. Note that you can use the sliders or numeric entry for a precise setting.

In the center of this interface is a gray box with some text in it. Dragging the box to a new position will update the CSS information in the bottom-right panel.Also included are the vendor prefixes for various browsers.

CSS3 Radius and Box Shadow

Here are some settings Ive applied to the CSS3 Radius and Box Shadow:

Border Radius: 10
Box Shadow Offset: 16
Box Shadow Blur: 17
Box Shadow Color: #DA70D6

Here’s the the result in the screen shot above with the CSS in the bottom panels.

Note that the settings for the radius are global when you use the slider. However, in the actuall CSS you’l see that the settings for each individual corner which can be adjsted one-by-one later. Also, to reset all effects to zero, refresh the browser.

CSS3 Text Shadow

Here are some settings I’ve used for CSS3 Text Shadow:

Text Shadow Offset: 3
Text Shadow Blur: 2
Text Shadow Color: #A52A2A

Here are the results.

CSS3 Transforms

Here are the settings I used to create an effect:

Rotate: 25
Scale 1.3
Skew X/Horizontal: -14
Skew Y”Vertical: 1

Here are the results.

CSS3 Columns

This tool is useful for designing multi-column layouts. Here are the settings I used:

Columns: 3
Gap: 25
Rule Thickness: 6
Rule Color: #98FB98

Here are the results of the the above settings.

CSSx Gradient Background (not part of the CSS3 specification)

This is a simple tool to use. In the Direction popup, you have a few choices: Horizontal, Vertical, Diagonal from Top Left, Diagonal from Top Right.

Here are the settings in action.

Diagonal from Top Left
From Color: #FF4500
From Position (relative): 33
To Color: #483D8B
To Position (relative): 90

Here are the results.

Border and Outline

This is a really nice tool to use. When you test it out, you’l see why. Here are some simple settings I used:

Border Thickness: 5
Border Color: #FF4500
Outline Thickness: 5
Outline Offest: 6
Outline Color: #4B0082

Here are the results.

Background Color

This is somewhat of a tricky tool to use due to the transparency controls, which can cause issues with the clear display of text. For best results, I recommend using a high contrast text and backround. Too soft a contrast will make the text difficult to read. Here’s an example of what I mean below.

In this case, I’m using a nearly opaque background with a dark color and text set at the program default of RGB 136,136,136. Note that I would recommend fully white or yellow text for the best contrast. A setting of 136,136,136 isn’t intense enough, in my opinion.

Here are the settings:

Background Color: #191970
Opacity: .9
Z-index: -2


Here’s the same background, but with an opacity of .3. Note that the text is almost invisible.

Content and Text

Here, you can manipulate the content and text to use in all the above effects. In my opinion, I would have liked to see this option in the first position, not the last, because these settings create the stage for what’s to come with using the above CSS. Still, you can use these setting in combination with each CSS section and text out the results.

As for your options, here are the different settings available to you: Padding, Text Size, Font, Bold, Italic, Text Color and Alignment. Note that the Text Color will be really important when working with background and the opacity property.


Here are some content and ttext settings for the screen shot above.

Padding: 13
Text Size: 13
Font: Verdana, Geneva, san-serif
Text Color: #000000
Alignment: Left

Note that there are only five font styles to chose from, which are: Verdana, Geneva, sans-serif, “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif, Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif, “Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, sans-serif and “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif.


Overall, this is a simple and straightforward progam. The only down side was that you couldn’t do fine tuning with some of the controls and you would have to wait until after the fact, when downloading the CSS. Otherwise, it was a joy to use – and fast. Updates happen quickly, almost in real-time. This is one tool that’s worth a donation, in my opinion.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles