CODEWITHSUNDEEP
csslinear-gradients
user11804236
user11804236

Reputation:

Linear Gradient with Round corners

I am creating a background image using linear gradients. How to to add round corners for each linear gradient.

Please provide solution without any changes in html (cant use more than one div)

.myStyle {

  height:500px;
  width: 900px;
  
  background-image:
    linear-gradient(lightgrey , blue),
    linear-gradient(lightgrey , blue),
    linear-gradient(lightgrey , blue), 
    linear-gradient(lightgrey , blue);

  background-repeat: no-repeat;

  background-size:
    100px 40px, 
    500px 60px,
    250px 50px,
    250px 60px; 

  background-position:
    0 0,
    0 80px,
    0 160px,
    0 220px;
}
<div class="myStyle"></div>

Upvotes: 4

Views: 7595

Answers (3)

Kaiido
Kaiido

Reputation: 136658

The cleanest might actually be to use svg for this instead of css-gradients.

You'll load it as a data-uri in the background-image property.
To make the rounded corner, you can use the rx and ry attributes of the <rect> element.
To make the gradients, you can use svg's <linearGradient> elements.

.mystyle {
  height: 900px;
  width: 500px;
  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='500' height='900' viewBox='0 0 500 900'><defs><linearGradient id='blue-grad' gradientTransform='rotate(90)'><stop stop-color='lightgrey' offset='0%'/><stop stop-color='blue' offset='100%'/></linearGradient></defs><rect x='0' y='0' width='100' height='40' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='80' width='500' height='60' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='160' width='250' height='50' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='220' width='250' height='60' rx='15' fill='url(%23blue-grad)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  SVG Image unminified:
  
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="900">
  <defs>
    <linearGradient id="blue-grad" gradientTransform="rotate(90)">
      <stop stop-color="lightgrey" offset="0%"/>
      <stop stop-color="blue" offset="100%"/>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100" height="40" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="80" width="500" height="60" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="160" width="250" height="50" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="220" width="250" height="60" rx="15" fill="url(#blue-grad)"/>
</svg>
*/
<div class="mystyle"></div>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272817

Not really sure what is your goal but if you want gradient with solid color to have radius you can build it using multiple linear-gradient and radial gradient.

Here is an example where I am using CSS variable to easily define the position, size and radius. This is one of your gradient. You need to repeat the code for all the gradient and adjust the different values.

.box {
  --w:200px; /*Gradient width*/
  --h:100px; /*Gradient height*/
  --r:10px;  /*Gradient radius*/
  --x:50px;  /*Gradient position x*/
  --y:40px;  /*Gradient position y*/
  --c:grey;  /*Gradient color*/
  margin:0;
  height:100vh;
  background:
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x)  var(--y) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) var(--y) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
    
    linear-gradient(var(--c),var(--c)) calc(var(--x) + var(--r)) var(--y) / calc(var(--w) - 2*var(--r)) var(--h),
    linear-gradient(var(--c),var(--c)) var(--x) calc(var(--y) + var(--r)) / var(--w)  calc(var(--h) - 2*var(--r));
  background-repeat:no-repeat;
  
  width:300px;
  height:200px;
  display:inline-block;
  border:1px solid;
}
<div class="box"></div>

<div class="box" style="--w:80px;--r:30px;--c:red;"></div>

<div class="box" style="--h:80px;--r:40px;--x:5px;--y:5px;--c:blue"></div>

Upvotes: 13

keanu_reeves
keanu_reeves

Reputation: 370

Maybe try this approach instead of making one div output multiple gradient boxes?

.myStyle {
  width:150px;
  height:100px;
  background:linear-gradient(black,purple);
  border-radius:20px;
}
<div class="myStyle"></div>

Upvotes: -1

Related Questions