Gradient Properties

[Jonnie Grieve]

Is there support in GWD for changing the shape of Gradients to say from circle to elliptical?  There's no authoring for it and i can;t seem to manage it in code view.  

Many thanks   :)

[Jason Long]

Hi Jonnie

Yes, we have the Gradient editing tool which located in the toolbar.  The Gradient editing tool is in the same area as the Paint bucket tool.  You just need to click and hold for a second and then a flyout submenu will displays with the Fill tool, Stroke tool and Gradient tool or you can use keyboard shortcut "K" to toggle between tools.  You can try this link https://support.google.com/webdesigner/answer/4317356?hl=en&ref_topic=3227692.  Hope it can helps.

Thanks

Jason (GWD team)

[Jonnie Grieve]

Hello Jason,

I don't think I made myself quite clear enough, so apologies.

I know the gradient tool and as it is, it's a lovely tool which makes it easy to make some cool gradient effects.  I'm a new member of Team Treehouse which taught me a little more than I knew before about Gradients. 

The Gradient I've made just now in GWD looks something like this.

background-image: -webkit-radial-gradient(50% 50%, rgb(255, 255, 255) 0%, rgb(100, 100, 100) 33%, rgb(100, 100, 100) 52%, rgb(100, 100, 100) 53%, rgb(100, 100, 100) 53%, rgb(100, 100, 100) 54%, rgb(100, 100, 100) 55%, rgb(100, 100, 100) 55%, rgb(100, 100, 100) 57%, rgb(0, 0, 0) 60%, rgb(100, 100, 100) 70%);

Obviously the radial gradient property is exported in RGB values in GWD which is great.  But here's an example of a simpler gradient I got from outside of GWD

-webkit-radial-gradient(closest-side, circle, #e2A112, #00018F);

It specifies values like closest-side and circle to give us even more control of how are gradients will look.  

Is there support for anything like this or am I asking too much for authoring for every last bit of every element can be authored by GUI.   I was just interested to know really.  Just to add, I found the button in the end (where it always was  :P  for more draggable element options but I get the sense there's something more out there that could be done)

Thanks.   :)

[Jason Long]

Hi Jonnie

Thanks for the clear explanation.  The css gradient format that you provided is it is invalid and it's not working in the GWD.  You could try this css gradient format "background-image: -webkit-radial-gradient(50% 50%,closest-side,blue,green,yellow,black);".  However, when you use the Gradient tool, the css gradient format will return back to the RGB value.  Sorry for the inconvenient.  We will list all the supported css gradient format in the documentation.

Thanks

Jason (GWD team)

[Jonnie Grieve]

That's interesting that GWD doesn' pick on on that format, I'll have to investigate that further.  But anyway thanks for that, and I'll look for the updates and any further updates in the future to the gradient tool.   :)