Virtuosoft's CSS Gradient Generator
View on
GitHub
or on
Virtuosoft's website
Config
Share permalink
QR Code
Get PNG
Copy CSS
Get CSS
Undo
Redo
Presets
Export all
Import
Save
Delete
Preview
Adjust color
Pop out
Gradient properties
Simple
Advanced
Expert
Current gradient needs advanced features so the desired layout is overwritten! ...
Force change
Current gradient needs expert features so the desired layout is overwritten! ...
Force change
Repeating:
repeat
no repeat
Gradient type:
linear
radial
Direction:
Shape:
circle
ellipse
Size:
Implicit
closest-side
closest-corner
farthest-side
farthest-corner
Explicit
Horizontal position:
Implicit
left
center
right
Explicit
Vertical position:
Implicit
top
center
bottom
Explicit
Update order
Add stop point
×
Generated CSS
×
Gradient permalink
Test the current gradient in your mobile browser
×
Export presets
save the content to a file
×
Import presets
paste the previously saved data into the textarea
×
Configuration
CSS selector:
Color format:
rgb
hsl
hex
Color picker visible sliders:
hsl
rgb
cie
opacity
color swatches
Mixed stop point units:
enabled
disabled
Code generation:
bg color
IE filter
SVG
old webkit
newer webkit
-ms
Fallback width:
px
Used in some circumstances with old webkit and SVG generation. Using preview size if not specified.
Fallback height:
px
Used in some circumstances with old webkit and SVG generation. Using preview size if not specified.