Shape gradient in css

Question

I tried for hours to make a shape gradient equal to the one at Laracasts. Actually my code don't show anything, can someone help me?

a{
    background: linear-gradient(118deg,#328bf2,#1644ad);
    border-radius: 54% 46% 64% 36%/64% 42% 58% 36%;
    content: "";
    position:absolute;
    top: -250px;
    left: 48%;
    width: 930px;
    height: 870px;
}

<a></a>

@AlvaroMontoro I guess he meant the other shape when the window is reduced as he copied the same CSS code but it's working fine here — Temani Afif
– Temani Afif, Commented Jan 11, 2019 at 0:18
That shape would be an interesting challenge just with CSS. Probably not possible right now without doing some hacky thing. — Alvaro Montoro
– Alvaro Montoro, Commented Jan 11, 2019 at 0:18
@AlvaroMontoro with a mix of radial gradient it can be done ;) — Temani Afif
– Temani Afif, Commented Jan 11, 2019 at 0:19

Temani Afif · Accepted Answer · 2019-01-11 00:06:24Z

2

I would consider some SVG for this in order to easily create the curved part of the shape then apply it as a part of a multiple background layer:

.container {
  height: 100vh;
  background: 
  linear-gradient(#fff,#fff) left/calc(100% - 100vh) 100% no-repeat,
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ><path d="M0 64 L64 64 C60 50 56 46 29.33 50.83 C15.33 53.16 10.5 40.33 17.16 27.66 C20 11.66 16.33 6.5 0 0 Z"  fill="white"/></svg>') right/auto 100% no-repeat, 
  linear-gradient(118deg,#328bf2,#1644ad); 
}

body {
 margin:0;
}

<div class="container">

</div>

Here is a good online tool where you can easily adjust the shape:

http://jxnblk.com/paths/?d=M0 64 L64 64 C60 50 56 46 29.33 50.83 C15.33 53.16 10.5 40.33 17.16 27.66 C20 11.66 16.33 6.5 0 0 Z

Simply append the current path to edit it.

edited Jan 11, 2019 at 0:06

answered Jan 11, 2019 at 0:01

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nipun Ravisara · Accepted Answer · 2019-01-11 02:14:57Z

0

div
   {
     background-image: linear-gradient(to right bottom, 
     rgba((255, 0, 0, 0.8),.85),
     rgba((255, 0, 0, 0.6), .85)
     );
   }

Specially in here you can specify the angle of the gradient colors by adding - "to right bottom" keyword. also you can use this method in sass.

answered Jan 11, 2019 at 2:14

Nipun Ravisara

4,5914 gold badges26 silver badges40 bronze badges

Collectives™ on Stack Overflow

Shape gradient in css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related