![]() You want something that is both stylish and unique, but also versatile enough to be used in a variety of contexts. Sketch and Photoshop packs are available as well.Ĝhoosing the right color palette for your project can be difficult. png version of each gradient and copy their CSS3 cross-browser codes. Looking □ for cool background gradients for your UI? A free collection of 200 linear gradients that you can use as content backdrops in any part of your website. If we form the gradients using the above mentioned method and apply them to the element, we can get the required effect.200 Beautiful Color Gradients For Your Next Design ProjectĬoolest handpicked gradient hues for your next super □ amazing stuff. Thus the gradient's specification should read as follows: background-image: linear-gradient(to right, red, orange 50%, brown). The position of the final color is always assumed to be at 100%. So at 50% the color should be orange and then the final color would be brown.If equal splits are not required, we can assign the percentages as we wish. Now, since we have two color changes (red - orange and orange - brown), the percentages must be set as 100 / 2 for equal splits.Since our gradient should start as red on the left side, just specify red as the first color (percentage is assumed to be 0%). Next step is to define the colors of the gradient.If it should be red at right and brown at left then give the direction as to left. If the color should be red at left side and brown at the right side then use the direction as to right. First parameter is the direction of the gradient.Now if you want the text to have a simple 3 color gradient (that is, say from red - orange - brown), we just need to change the linear-gradient specification as follows: ( Note that the background-clip: text is an experimental property and is not supported widely.) This is done by setting background-clip: text. Since, the gradient needs to be applied only to the text and not to the element on the whole, we need to instruct the browser to clip the background from the areas outside the text. Now this alone would mean the background applies to the entire element and not just the text.īackground-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22) So, we end up getting a gradient like in the below snippet. Similarly the colors change from one to another depending on the bands specified by color stop percentages.At 14.25% (of the container's size), the color will exactly be #f2f as per the gradient specified.The percenatge is set at 14.25 because there are seven color changes and we are looking for equal splits. Between 0% to 14.25%, the color changes from #f22 to #f2f gradually.First color is always assumed to start at 0% even though the percentage is not mentioned explicitly. The gradient starts at color #f22 at 0% (that is the left edge of the element).It goes from one color to another depending on the colors and color-stop percentages given for it.įor example, in rainbow text sample (note that I've converted the gradient into the standard syntax): The element is given a background which is the gradient. ![]() The way this effect works is very simple.
0 Comments
Leave a Reply. |