JavaScript disabled

While it will still mostly work, a lot of this site's functionality relies on JavaScript - please enable it for the best experience.

Awesome CSS3 generators

CSS3 generators make a web developer's life so much easier, particularly if you don't use the properties very often. Here, I have gathered some of my favourite generators:

Border-Radius.com

This is the CSS3 generator that I visit the most often. This is incredibly useful, providing a quick and easy way to generate border-radius properties. The address is very easy to remember and the design is very simple and minimalistic, and you can choose the browsers that you want to support at the bottom. You can set the different corners to different values, and your code updates in realtime.

Layer Styles

Layer Styles allows you to generate the code for drop-shadow,  inner-shadow, background, border and border-radius, providing a realtime view of your changes. The interface will be familiar to most people, particularly designers. The code it produces supports Webkit browsers (Chrome, Safari), Firefox, Opera and newer versions of Internet Explorer.

CSS Gradient Generator

This tool generates CSS3 background gradients. This tool has a huge 137 presets that you can use to get started,  and the code that this tool generates is compatible with more versions of Internet Explorer than Layer Styles, using filter properties as a fallback. Optional IE9 support is included, however this requires that you place some browser-specific code on your page. This tool is also designed to look like a program that I'm sure most of you are familiar with.

CSS3Generator.com

While CSS3Generator isn't the prettiest of sites that we have listed, it is certainly the most functional. It generates code for the most properties out of all of the services listed here. It supports border-radius, box-shadow, text-shadow, RGBA, @font-face, multiple columns, box-resize, box-sizing, outline, transitions, transform, selectors and gradients.

About Oliver Davenport:

I am an young but experienced web developer living in England.

You can view more articles by this author here.

Tags: css3 design

Comments

No comments; leave one below.

says:

Add comment

 

You can use markdown in comments (press "m" for a cheatsheet).

Enable JavaScript to post a comment

Markdown Cheat Sheet

# This is an <h1> tag
## This an <h2> tag
###### This is an <h6> tag

Inline markup: _this text is italic_, **this is bold**, and `code()`.

[Link text](link URL "Optional title")
[Google](http://google.com/ "Google!")

![Alt text](image URL)

![This is a fish](images/fish.jpg)

1. Ordered list item 1
2. Ordered list item 2

* Unordered list item 1
* Unordered list item 2
* Item 2a
* Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:

----

> This is a blockquote

This is an <h1> tag

This an <h2> tag

This is an <h6> tag

Inline markup: this text is italic, this is bold, and code().

Link text Google

This is a fish

  1. Ordered list item 1
  2. Ordered list item 2
  • Unordered list item 1
  • Unordered list item 2
    • Item 2a
    • Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:

This is a blockquote

Toggle MarkDown / HTML (t), full reference or close this