Sketch to CSS - Radial Gradient Css Export Problem

Question

My English is a little bad. Sorry. There is a design prepared in the Sketch program. I couldn't spill the radial gradiant correctly into the css code. How do I get the same radial gradiant appearance?

Screenshots : https://i.stack.imgur.com/8DrNp.jpg - https://i.stack.imgur.com/ke7Il.jpg

Radial Gradiant Height : 1000px

Radial Gradiant Color : #3F46AD (Opacity 10%)

Note: The "Copy CSS Attributes (Sketch)" feature did not export correctly;

HTML :

<div class="gradient-bg-wrapper">

</div>

<div class="text-wrapper">
    test test test
</div>

CSS :

.gradient-bg-wrapper{
    height: 1000px;
    background-image: radial-gradient(50% 124%, #3F46AD 75%, #FFFFFF 100%);
    opacity: 0.1;
 }

you can find all what you need by checking the DOC : https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient and the spec: https://drafts.csswg.org/css-images-3/#radial-gradients — Temani Afif, Jan 25 '19 at 16:05
@TemaniAfif First of all thank you. I tried a lot. But I didn't get the same export. :( — Gökhan, Jan 25 '19 at 16:10
Having the same problem.. radial gradient is not the same when exported as CSS — uNki, Dec 12 '19 at 15:33

score 0 · Answer 1 · answered Dec 30 '20 at 07:15

Try this:

.gradient-bg-wrapper{
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(63,70,173,0.1) 0%,rgba(255,255,255,0.1) 100%);
 }

<div class="gradient-bg-wrapper">
</div>

<div class="text-wrapper">
    test test test
</div>

Sketch to CSS - Radial Gradient Css Export Problem

1 Answers1