Generate CSS3 Font Face:
Allows you to use non-websafe fonts in your website.
You will need either an .otf or ttf file and you must have permission to embed the font into your website.
Browser Support:
IE, Chrome, Safari, Firefox, Opera
Generate CSS3 Backface Visibility:
The backface-visibility property defines whether or not an element should be visible when not facing the screen.
This property is useful when an element is rotated, and you do not want to see its backside.
In order to get a true 3D effect you will need to set the perspective of the parent which will contain the 3D environment, or add transform perspective to this element.
Used for CSS3 3D properties.
Browser Support:
IE 10+, Chrome, Safari, Firefox, Opera
Generate CSS3 Background Gradient:
The background gradient property allows you to fill the background of an element with a gradient.
Create CSS3 allows you to generate basic linear and radial gradients.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Border Radius:
The background radius property allows you to put curved edges onto an element.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Box Shadow (Outer):
The box shadow property allows you to put a shadow onto an element.
This outer box shadow will allow you to put the shadow on the outside of an element (drop shadow).
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Box Shadow (Inner):
The box shadow property allows you to put a shadow onto an element.
This inset box shadow will allow you to put the shadow on the inside of an element (inner shadow).
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Box Sizing:
The box-sizing property allows you to define whether to include padding and borders within the specified width.
For example, if you would like a box to be exactly 200px wide, you can specify box-sizing as "border-box", set the width as 200px, and any padding or border will stay within the 200px. Content-box is the standard rendering (padding and border is in addition to the width).
Browser Support:
IE 8+, Chrome, Safari, Firefox, Opera
Generate CSS3 Columns:
The column count and column gap properties allow you to split your text into multiple columns within an element.
Browser Support:
IE 10+, Chrome, Safari, Firefox, Opera
Generate CSS3 Opacity:
The opacity property allows you to make an element be transparent, semi-transparent or non-transparent.
Uses values (0-1). 0 = fully transparent, 0.5 = 50% transparent, 1 = no transparency.
Create CSS3 will generate a fall back for older version of Internet Explorer that doesn't allow the opacity attribute.
Browser Support:
IE, Chrome, Safari, Firefox, Opera
Generate CSS3 Perspective:
The perspective property creates the size of a 3D environment in pixels (z-axis).
The perspective property needs to be placed on the parent of the element(s) you would like to use the 3D perspective on. The perspective you set will effect the children of the element you place it on.
Used for CSS3 3D properties.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Perspective Origin:
The perspective origin property sets the position you would the like the perspective to be effective from (similar to how Transform Origin works).
The perspective origin needs to be placed on the parent of the element(s) you would like to use the 3D perspective on. The perspective origin you set will effect the children of the element you place it on.
Should be used in conjunction with the perspective property.
Used for CSS3 3D properties
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Text Shadow:
The text shadow property allows you to put a shadow onto an elements text.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform - Perspective:
The transform perspective property allows you to set the 3D perspective of an element in pixels (z-axis).
Used for 3D properties.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Transform - Rotate:
The transform rotate property allows you to rotate an element.
You can set the origin of where the element will rotate from (the axis point) using the transform origin property.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform - Rotate 3D:
The transform rotate 3D property allows you to rotate an element within a 3D environment.
In order to get a true 3D effect you will need to set the perspective of the parent which will contain the 3D environment, or add transform perspective to this element.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Transform - Scale:
The transform rotate property allows you to scale an element and it's children.
1 is the normal size (1:1 scale), 0.5 = 50% of the size, 2 = twice the size.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform - Scale 3D:
The transform rotate property allows you to scale an element and it's children in a 3D environment.
In order to get a true 3D effect you will need to set the perspective of the parent which will contain the 3D environment, or add transform perspective to this element.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Transform - Skew:
The transform skew property allows you to skew an element and it's children.
1 is the normal size (1:1 scale), 0.5 = 50% of the size, 2 = twice the size.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform - Translate:
The transform translate property allows you to move an element and it's children's positions.
This varies from using the left and top properties as you can have an element relative, when you translate the element it will visually move the element however, the original relative position of the element will remain the same. Left and top require you to set an element as absolute and changing the properties physically moves the element around the screen.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform - Translate 3D:
The transform translate 3D property allows you to move an element and it's children's positions in a 3D environment.
In order to get a true 3D effect you will need to set the perspective of the parent which will contain the 3D environment, or add transform perspective to this element.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Transform Origin:
The transform origin property allows you set the origin from which a transform will take place.
Browser Support:
IE 9+, Chrome, Safari, Firefox, Opera
Generate CSS3 Transform Style:
The transform style property allows you set the style of transform for a particular element (2D or 3D).
To use 3D you must set the perspective of the parent which will contain the 3D environment, or add transform perspective to this element.
Browser Support:
IE 10+, Chrome, Safari, Firefox
Generate CSS3 Transition:
The transition property allows you make an element transition between 2 styles.
When using transition you will only need to set the transition on the elements main class. After this has been done any :hover classes will automatically animation on and off. You can also add and remove new classes to the element using javascript and the element will transition between styles.
Browser Support:
IE 10+, Chrome, Safari, Firefox, Opera
