CODEWITHSUNDEEP
htmlcsslinear-gradients
Iqbal Khan
Iqbal Khan

Reputation: 4617

Convert linear-gradient syntax to -webkit-gradient syntax

I am trying to add lines in the paragraph but I am unable to convert linear-gradient below syntax to -webkit-gradient syntax because linear-gradient is not supported in wicked_pdf for rails.

Any help, I am unable to find -webkit-gradient documentation on net.

linear-gradient(180deg, rgba(230, 230, 231, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);

Upvotes: 2

Views: 1064

Answers (1)

cpcolella
cpcolella

Reputation: 267

You do it like this:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

<type> is either linear or radial.

<point> is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.

[, <radius>]? is a number and is only used when <type> is radial.

<stop> is a function, color-stop, to, or from. color-stop takes 2 arguments: the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). to(color) is the equaivalent of color-stop(0, color) and from(color) is the equaivalent of color-stop(1.0, color).

Example: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00))

You can also use -webkit-linear-gradient(angle, startColor, endColor)

Example: -webkit-linear-gradient(135deg, white, black)

Your specific example will just be this:

-webkit-linear-gradient(180deg, rgba(230, 230, 231, 1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);

Sources:
https://webkit.org/blog/175/introducing-css-gradients/
https://webkit.org/blog/1424/css3-gradients/

Upvotes: 4

Related Questions