На русском
Blog

CSS3/SASS object generator

Templates
CSS
SASS
All prefixes
Copy hover to orig
Original
Hover
Copy orig to hover
General parameters
Cursor
Object width
Object height
Object padding
Padding top
Padding right
Padding bottom
Padding left
Object width
Width unit
Object height
Height unit

Border

Border style
Border width
Border unit
Border color

Background

Background
Repeat
Attachment
X position
Y position
Back-nd width
Back-nd height
Gradient generator
About gradient generator
Opacity
Location
Color
Location
Direction
linear
radial
Hue
Saturation
Lightness
Border radius
About border radius generator
Border radius

Separate corners

Left top
Right top
Right bottom
Left bottom
Text (shadow & general)
About text shadow generator
Font family
Font style
Font size
Font size unit
Font color
Text align

Text shadow

Shadow color
Left offset (px)
Top offset (px)
Blur (px)
Shadow opacity
Box shadow
About box shadow generator
Horizontal offset
Vertical offset
Blur radius
Spread radius
Shadow color
Shadow opacity
inset
outline
Transform
About transform generator

What is CSS3 transform generator?

This generator allows to modify the object geometrical properties. Use scale X/scale Y to make the object bigger or smaller horizontally/vertically. The "Translate X" and "Translate Y" options set the object offset from left and right. "Skew X" and "Skew Y" set up how skewed horizontally and vertically the object should be.

Note: in order for any generator to work, make sure the box next to a generator name is ticked

Browser compatibility

Property Google Chome compatibility Mozilla Firefox compatibility Opera compatibility Microsoft Internet Explorer compatibility Safari compatibility Yandex browser compatibility
transform 36.0+
4.0 -webkit-
16.0+
3.5 -moz-
23.0+
15.0 -webkit-
12.1+
10.5+ -o-
10.0+
9.0 -ms-
3.2+ -webkit- 1.5+
Scale X
Scale Y
Translate X (px)
Translate Y (px)
Skew X
Skew Y
Rotate
Transition
About transition generator
Property
Duration
Duration unit
Function
x

Gradient templates

Button templates

Pink button
Yellow button
Glass button
Dark button
IPhone button
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON
SIMPLE BUTTON