How can I create a gradient in the new visual editor I only see color
Hi @JosephR I’d never noticed that this doesn’t seem to be an option in PG. As an alternative way to create your gradient you could use something like https://uigradients.com/ to set your values then click on the < > in the top bar and copy the styles. Then create a new style rule in PG and paste the gradient styles into the rule. A little bit more work but it should work fine (see screenshot). Hope this helps.
1 Like
+1 for a color gradient tool. It would definitely save time.
Thanks for considering it devs.
+1
That is a rather strange omission from the Visual CSS Editor, in Pinegrow. Sure direct code and input as suggested is an alternative, but it is possible via the UI GUI.
Pinegrow uses Spectrum for its color picker: Spectrum - The No Hassle jQuery Colorpicker which does not seem to support gradients directly via its API.
@matjaz , @Emmanuel , @MhdAljuboori ,
Here is an example called Grapick and is MIT licensed gradient color picker, that could be leveraged in Pinegrow. Its developed by the person behind GrapeJS and is a great example of a Gradient GUI used in conjunction with the same spectrum color picker that Pinegrow uses.
Grapick Demo: Grapick Dev
Perhaps it could be used much like is seen in GrapeJS, as its own gradient approach demonstrates.
Grapick:
Grapick + Spectrum (same color picker that Pinegrow uses)
Here is the example seen above:
It seems like Grapick would be a good choice for adding Gradient support in the Visual CSS Editor — and would integrate very nicely with Pinegrow. Especially since GrapeJS uses the same Spectrum Color Picker that Pinegrow does.
Seems obvious to have such Gradient capabilities as part of Pinegrow’s Visual CSS Editor. 
3 Likes