CODEWITHSUNDEEP
htmlcss
Yung Silva
Yung Silva

Reputation: 1500

curved shape with curved line with blur effect CSS

the result I need to get:

enter image description here

what i have so far

header {
  min-height: 300px;
  background: #000;
}

main {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 300px;
}

main:before {
  content: '';
  position: absolute;
  background: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
}
main:after {
  content: '';
  position: absolute;
  top: 0rem;
  background: #141f36;
  width: 120%;
  height: 300px;
  margin-left: -10%;
  margin-right: 10%;
  border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}
 <div class="page">
    <header></header>
    <main></main>
  </div>

I have no idea how to make the line, can someone help me with this?

NOTE: the line needs to have blur/bright/light effect just like in the example image

Upvotes: 1

Views: 476

Answers (2)

doğukan
doğukan

Reputation: 27491

Here is a single div idea with radial-gradients.

div {
  min-height: 400px;
  width: 100%;
  /* you can change these variables to see what they do */
  --top-distance: 3%;
  --line-width: 0.3%;
  --blur: 0.5%;
  --gradient-top-distance: 100px;
  --s: 350%; /* increase this to reduce the slope. */
  background: radial-gradient(farthest-side at center bottom, transparent 0 calc(100% - (var(--top-distance) + var(--blur)*2 + var(--line-width))), #0c5dd3 calc(100% - (var(--top-distance) + var(--blur) + var(--line-width))) calc(100% - (var(--top-distance) + var(--blur))), transparent calc(100% - var(--top-distance)) 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat, 
              radial-gradient(farthest-side at center bottom, #141f36 99%, transparent 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat;
  background-color: #000;
}
<div></div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273688

You can add another pseudo element where you apply a blur filter

main {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: #000;
}

main:before,
main:after{
  content: '';
  position: absolute;
  height:300px;
  background: #141f36;
  left:-10%;
  right:-10%;
  bottom:0;
  border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}

main:after {
  border:3px solid #0c5dd3;
  filter:blur(1px);
  bottom:-22px;
  background:none;
}
<main></main>

Upvotes: 0

Related Questions