Butonia
: Realtime CSS Playground
αlpha
I'm perfect!
State
Normal
Hover
Active
Focused
Global opacity
Transition
Delay
sec
Duration
sec
Repeat
times
Function
Linear
Easing
Ease-In
Ease-Out
Cursor
Default
Default
Pointer
***
Custom
>
Size
Auto
Border-box
Width
v
px
pt
in
em
ex
%
Height
u
px
pt
in
em
ex
%
Overflow
Visible
Hidden
Auto
Scroll
Margin
Equal
T
px
pt
in
em
ex
%
R
px
pt
in
em
ex
%
B
px
pt
in
em
ex
%
L
px
pt
in
em
ex
%
Padding
Equal
T
px
pt
in
em
ex
%
R
px
pt
in
em
ex
%
B
px
pt
in
em
ex
%
L
px
pt
in
em
ex
%
Border
Style
Equal
px
pt
in
em
ex
None
Solid
Dashed
Dotted
px
pt
in
em
ex
None
Solid
Dashed
Dotted
px
pt
in
em
ex
None
Solid
Dashed
Dotted
px
pt
in
em
ex
None
Solid
Dashed
Dotted
Image
Enable
Local file
Load...
Drop
+
URL
>
Thikness
px
%
Style
Stretch
Repeat
Round
Gradient
Radius
Equal
Elliptical
px
pt
in
em
ex
%
px
pt
in
em
ex
%
px
pt
in
em
ex
%
px
pt
in
em
ex
%
Text
Color
Size
px
pt
in
em
ex
Bold
Align
Center
Left
Right
Justify
Case
None
Capitalize
Uppercase
Lowercase
Smallcaps
Line-height
px
pt
in
em
ex
%
Letter-spacing
px
pt
in
em
ex
%
Word-spacing
px
pt
in
em
ex
White-space
Normal
Nowrap
Pre
Pre-line
Pre-wrap
Text-overflow
Default
Clip
Ellipsis
Background-clip
Border
Padding
Content
Text
Font
Sytem
Web Font-face
>
Decoration & Style
Italic
Underline
Line-through
Overline
Underline Advanced
Color
Width
Style
Offset
Shadow
Enable
Offset X
px
pt
in
em
ex
Offset Y
px
pt
in
em
ex
Blur
px
pt
in
em
ex
Color
Transform
-Webkit-3D
Enable 3D
Perspective
°
Rotate
Origin X
%
px
pt
in
em
ex
Origin Y
%
px
pt
in
em
ex
Angle
°
Rotate X
°
Rotate Y
°
Rotate Z
°
Scale
X
%
Y
%
Z
%
Skew
X
°
Y
°
Z
%
Background
Color
Transparent
Image
Enable
Local file
Load...
Drop
+
URL
>
Repeat
Repeat
Repeat-X
Repeat-Y
No-repeat
Position
H
Left
Center
Right
Custom
V
Top
Center
Bottom
Custom
Size
Auto
Contain
Cover
Custom
W
px
pt
in
cm
em
ex
%
H
px
pt
in
cm
em
ex
%
Gradient
Enable
Shape
Linear
Circle
Ellipse
Repeating
From
Left →
Top left
Top ↓
Top right
Right ←
Bottom right
Bottom ↑
Bottom left
Center
------------
Custom angle
deg
Size
Cover
Contain
Closest-corner
Farthest-corner
Closest-side
Farthest-side
Revert
Color
Position
%
Import from Ultimate CSS Gradient Generator
Generate gradient from image...
Box Shadow
+ Add
Expand All
Collapse All
Layer #1
Inset
Offset X
px
pt
in
em
ex
Offset Y
px
pt
in
em
ex
Blur
px
pt
in
em
ex
Spread
px
pt
in
em
ex
Color
Arrow
Enable
Type
Triangle
1-sided left
1-sided right
Custom
W
H
Pivot
Position
Bottom
Top
Left
Right
Offset
Center
Custom
%
px
pt
in
em
ex
Size
Color
Auto
Border
Border Width
px
pt
in
em
ex
%
Auto
Border Color
Auto
Presets
Print Current
Save
1
2
3
4
5
6
7
#
-Webkit-Filters
Brightness
%
Blur
px
Contrast
%
Grayscale
%
Hue-rotate
°
Invert
%
Opacity
%
Saturate
%
Sepia
%
Drop-shadow
X
Y
Blur
Color
Zoom
Output
Copy
Close