CSS Generator - Gradient

       
save | reset
Code

Border

px
 


Border Radius

px
 

px
px
px
px

Box Shadow

 

Add more [+]

Background




keyword  
% (percent)  
px (pixel)

%
%
px
px

Text Shadow

 

Add more [+]

Gradient

px px
% %



Add Stopper [+]

Transform





 



Transition


Image Filter

Animation

 


function

CSS Gradient

CSS color gradient is smooth transition between two or more colors.

There are 6 types of orientation possible: linear, radial, elliptical and their repeating types. Linear orientation is defined by an axis and angle, but radial and elliptical are defined by center and side corners.

background:linear-gradient(<ANGLE>, <COLOR-AND-POSITION>, ... );
background:radial-gradient(center <CENTER-POSITION AND EDGE>, <COLOR-AND-POSITION>, ... );
background:radial-gradient(ellipse <CENTER-POSITION AND EDGE>, <COLOR-AND-POSITION>, ... );
And almost same syntex for repeating gradients.
background:repeating-linear-gradient(<ANGLE>, <COLOR-AND-POSITION>, ... );
background:repeating-radial-gradient(center <CENTER-POSITION AND EDGE>, <COLOR-AND-POSITION>, ... );
background:repeating-radial-gradient(ellipse <CENTER-POSITION AND EDGE>, <COLOR-AND-POSITION>, ... );
Transparent gradients can overlap and provides more patterns. This tool create code only for latest browsers. If you want code which support all browsers then check the link below.


comments powered by Disqus