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

What is CSS3 box shadow generator?

This tool creates a shadow behind or inside an object with the help of CSS3. To create a shadow simply setup desired horizontal and vertical offsets, blur radius, spread radius, shadow color shadow opacity and select whether shadow should be behind(outline) or inside (inset) the box.

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
box-shadow 10.0+
4.0+ -webkit-
4.0+
3.5+ -moz-
10.5+ 9.0+ 5.1+
3.1+ -webkit-
1.5+
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