Highlighted

[Design]-How can I give gradient color to a border (stroke) in XD?

Community Beginner ,
Jan 25, 2020

Copy link to clipboard

Copied

does XD have gradient function on border too?

i see no any other color-options when creating a border on a shape. .

K-004.pngK-005.png

 

<The Title was renamed by moderator>

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

You can mimic the effect by creating an object with a gradient fill, and overlapping it with a slightly smaller element with a normal solid fill. And if you need just a gradient line, then let the Pathfinder cut the smaller object away from the larger lower one. It's a make-shift method, but delivers the effect.

 

Please take note that when developers are going to recreate your design with HTML, it's much more difficult to achieve this gradient line effect in CSS. It's available as an SVG property, though (a web-ready drawing). But XD won't support it, even when you create a gradient line in Illustrator, save it as an SVG and then import that into XD. It just won't appear... 

Topics

Design, How to, Missing feature

Views

2.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

[Design]-How can I give gradient color to a border (stroke) in XD?

Community Beginner ,
Jan 25, 2020

Copy link to clipboard

Copied

does XD have gradient function on border too?

i see no any other color-options when creating a border on a shape. .

K-004.pngK-005.png

 

<The Title was renamed by moderator>

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

You can mimic the effect by creating an object with a gradient fill, and overlapping it with a slightly smaller element with a normal solid fill. And if you need just a gradient line, then let the Pathfinder cut the smaller object away from the larger lower one. It's a make-shift method, but delivers the effect.

 

Please take note that when developers are going to recreate your design with HTML, it's much more difficult to achieve this gradient line effect in CSS. It's available as an SVG property, though (a web-ready drawing). But XD won't support it, even when you create a gradient line in Illustrator, save it as an SVG and then import that into XD. It just won't appear... 

Topics

Design, How to, Missing feature

Views

2.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Jan 26, 2020

Copy link to clipboard

Copied

Hello,

Sorry for inconvenience. For now,there is no abilities to put gradients on border/stroke. But you may see in future release, Feature has been already raised by other customers Adobe XD Feedback : Feature Requests & Bugs ,please go and vote .

Thank you,

Anita Subedi

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Jan 28, 2020

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching and sharing your feedback. In addition to what Anita has suggested, there is a direct link of the similar request that you can upvote here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/17796841-apply-gra... 

 

We would request you to please submit your feedbacka and upvote the request to add your voice.

 

Hope it helps.

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
May 16, 2020

Copy link to clipboard

Copied

I was wondering about that too.  I hope that will be a new feature in the upgrades because I've been enjoying XD thus far.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 16, 2020

Copy link to clipboard

Copied

You can mimic the effect by creating an object with a gradient fill, and overlapping it with a slightly smaller element with a normal solid fill. And if you need just a gradient line, then let the Pathfinder cut the smaller object away from the larger lower one. It's a make-shift method, but delivers the effect.

 

Please take note that when developers are going to recreate your design with HTML, it's much more difficult to achieve this gradient line effect in CSS. It's available as an SVG property, though (a web-ready drawing). But XD won't support it, even when you create a gradient line in Illustrator, save it as an SVG and then import that into XD. It just won't appear... 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...