Acrosoft Online CSS Gradient Generator Tool

Acrosoft Online CSS Gradient Generator Tool

Start your very own handy CSS3 Gradient website today with our premium fully responsive CSS gradient script. You’ll always have amazing colors to use in your projects.

Click To Generate Gradient

A colorful css gradient background generator

A pure javascript generator to create colorful css backgrounds.

Idea

The idea is to have multiple layers of linear css gradients at different angles. The gradients go from color to transparent to let the lower layers shine through and generate the wanted effect. There is no limit in the number of layers.

 

Usage

There are two ways to use this generator:

  1. Include the generator in the website
  2. Use it just as a code generator

There are examples in the examples folder.

###1. Include the generator in the website Add the generator (it’s in the dist folder) to your html file and let it set the background to the element directly.

include_generator_example.html

<!doctype html>
<html lang="en">
    <head>
        <style type="text/css">#colorful {  height: 30em; width: 30em; padding: 1em; }</style>
    </head>
    <body>
        <div id="colorful">This element will have the colorful background.</div>
        <script src="https://raw.githubusercontent.com/webcore-it/colorful-background-css-generator/master/dist/colorful-background-css-generator.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            // The Generator
            var generator = new ColorfulBackgroundGenerator();

            // This adds 5 layers to the generator
            // The parameters are: degree[0-360], 
            //                      hue[0-360], saturation[0-100], lightness[0-100], 
            //                      positionColor[0-100], positionTransparency[0-100]
            // The lowest layer (at the bottom) in the css is the first added layer.
            generator.addLayer(new ColorfulBackgroundLayer(325, 5, 95, 55, 100)); // bottom layer
            generator.addLayer(new ColorfulBackgroundLayer(245, 75, 90, 70, 30, 80));
            generator.addLayer(new ColorfulBackgroundLayer(155, 150, 95, 70, 10, 80));
            generator.addLayer(new ColorfulBackgroundLayer(55, 230, 95, 65, 0, 70));
            generator.addLayer(new ColorfulBackgroundLayer(20, 300, 90, 65, 0, 55)); // top layer

            // Assign generated style to the element identified by it's id
            generator.assignStyleToElementId("colorful");
        </script>
    </body>
</html>

###2. Use it just as code generator Another way is to use the generator to generate the css for the background and add this generated css to your style.css.

generate_css_example.html

<!doctype html>
<html lang="en">
    <head>Generate the css class</head>
    <body>
        <pre id="code"></pre>
        <script src="https://raw.githubusercontent.com/webcore-it/colorful-background-css-generator/master/dist/colorful-background-css-generator.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            // The Generator
            var generator = new ColorfulBackgroundGenerator();

            // This adds 3 layers to the generator
            // The parameters are: degree[0-360], 
            //                      hue[0-360], saturation[0-100], lightness[0-100], 
            //                      positionColor[0-100], positionTransparency[0-100]
            // The lowest layer (at the bottom) in the css is the first added layer.
            generator.addLayer(new ColorfulBackgroundLayer(50, 35, 95, 45, 100)); // bottom layer
            generator.addLayer(new ColorfulBackgroundLayer(140, 220, 90, 70, 30, 80));
            generator.addLayer(new ColorfulBackgroundLayer(210, 340, 90, 65, 10, 55)); // top layer

            // Print the css style.
            var element = document.getElementById("code");
            element.innerHTML = generator.getCSSAsText();
        </script>
    </body>
</html>

Hints

  • Choose a high saturation between 80 and 100
  • Choose a lightness between 40 and 60
  • The lowest (first added) layer should have the positionTransparency at 100 and positionColor > 50 to make the lowest layer more colorful then the other layers

Supported Browsers

The only magic are css gradients. So it works with

  • Firefox 16+
  • Safari 5.1+
  • Chrome 10+
  • Internet Explorer 10+
  • Opera 12.1+
  • iOS 5.1+
  • Android 4+
  • Blackberry 10+
  • IE Mobile 10+

Lessons Learned

###Transparency in Firefox This is fixed in Firefox 36+ but an issue in earlier versions.

Firefox renders transparency in gradients different than webkit. The trick is to not use transparent or rgba(0,0,0,0) but the first color with alpha transparency = 0.

/* This fades to gray first before fading to transparent. */
div.gray {
    background: linear-gradient(0deg,  hsla(0,100%,50%,1) 0%, transparent 100%);
}
/* This fades from color to transparent. */
div.color {
    background: linear-gradient(0deg,  hsla(0,100%,50%,1) 0%, hsla(0,100%,50%,0) 100%);
}

###Degrees counting in webkit

  • Prefixed -webkit-linear-gradient is counting degrees counterclockwise.
    0° is at the left side.
  • The standard linear-gradient is counting degrees clockwise.
    0° is at the bottom side.

To convert the degrees of the standard linear-gradient to the -webkit-prefix degrees: (360 – standard-degrees) + 90

 

(Visited 803 times, 1 visits today)
Short Long URL with Acosoft URL Shortener & Earn Money by Sharing on Social Media

Comments

comments

Leave a Comment