На русском
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

What is CSS3 gradient generator?

It's a set of tools that allows to create gradient background of a particular object with the help of CSS3. Simply select a particular template by clicking the "Templates" button or setup one on your own: click on the gradient preview line to create a particular color or opacity stop. The sliders and color input settings are attached to an active stop. The stops on top along with the sliders and inputs are responsible for an active opacity stop and the ones on the bottom work for an active color stop.

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
linear-gradient, radial-gradient 26.0+
10.0+ -webkit-
16.0+
3.6+ -moz-
12.1+
11.1+ -o-
10.0+ 6.1+
5.1+ -webkit-
14.10+
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
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