Set CSS Gradient for container

Question

I have a container (div) and I am trying to apply the border like the image:

border-radius: 30px;
background-image: linear-gradient(90deg, rgba(238,237,244,1) 0%, rgba(252,252,252,1) 0%, rgba(142,224,240,1) 61%, rgba(250,250,250,0.9878326330532213) 100%);
background-origin: border-box;
background-clip: content-box, border-box;
border: double 1em transparent;

can you help me to understand what colors I have to set in the "linear-gradient css rule to obtain the same result of the image?

score 1 · Accepted Answer · answered Jun 06 '20 at 08:25

This is not something you can do with one gradient. I would consider this previous answer to approximate this:

.box {
  --r:10px;     /* radius   */
  --g1:rgba(252,252,252,1) 0%, #79aecf; 
  --g2:#79aecf 0%, rgba(252,252,252,1); 

  --rg1:transparent 50%,rgba(252,252,252,1) 55%, #79aecf; 
  --rg2:transparent 50%,#79aecf 55%, rgba(252,252,252,1); 
  border-radius:calc(2*var(--r));
  padding:calc(2*var(--r) + 5px);

  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--rg2)) top    left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    right,var(--rg1)) bottom left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at bottom left ,var(--rg2)) top    right/calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    left ,var(--rg1)) bottom right/calc(2*var(--r)) calc(2*var(--r)),
    /* borders*/
    linear-gradient(to top   ,var(--g2)) top   /calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g1)) bottom/calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to right ,var(--g1)) right /var(--r) calc(100% - 4*var(--r)),
    linear-gradient(to left  ,var(--g2)) left  /var(--r) calc(100% - 4*var(--r));
  background-repeat:no-repeat;
  
  margin:10px;
  width:300px;
  height:200px;
  box-sizing:border-box;
  display:inline-block;
  filter:drop-shadow(10px 8px 15px #000);
}

<div class="box"> </div>

score 0 · Answer 2 · answered Jun 06 '20 at 06:54

This is not something that you can make it with CSS. And your css should goes like:

.ok {
height:50px;
width:50px;
border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

<div class="ok">

Set CSS Gradient for container

2 Answers2