css-gradients

This example show the usage of CSS gradients

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
partial support for gradients
PrinceXML  OK
partial support for gradients
Antennahouse  OK

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="gradient1"></div>
        <div id="gradient2"></div>
        <div id="gradient3"></div>
        <div id="gradient4"></div>
        <div id="gradient5"></div>
        <!--
            <div id="gradient6"></div>
        -->
    </body>
</html>

Stylesheet

@import url("../styles/a5.css");

div {
    width: 3cm;
    height: 3cm;
    border: 1px solid blue;
    margin-right: 1em;
    margin-bottom: 1em;
}

#gradient1 {
    background: -webkit-radial-gradient(60% 55%, circle closest-corner, red, green 20%, yellow 70%, black);
    background: radial-gradient(60% 55%, circle closest-corner, red, green 20%, yellow 70%, black);
}

#gradient2 {
    background: -webkit-repeating-linear-gradient(red, red 11px, white 11px, white 22px);
    background: repeating-linear-gradient(red, red 11px, white 11px, white 22px);
}

#gradient3 {
    background: -webkit-linear-gradient(left, red, blue 30%, green);
    background: linear-gradient(left, red, blue 30%, green);
}

#gradient4 {
    background: -webkit-linear-gradient(225deg, red, green 20%, yellow 70%, black);
    background: linear-gradient(225deg, red, green 20%, yellow 70%, black);
}

#gradient5 {
    background: -webkit-repeating-radial-gradient(#000000, #ffffff 10px, #000000 20px);
    background: repeating-radial-gradient(#000000, #ffffff 10px, #000000 20px);
}