Is it possible to recreate this gradient effect only with html and css?

Question

Is it possible to recreate this gradient effect only with html and css?

Navigation

#1 by (0 votes)

1

I was visiting the following site link

And I thought maybe that would be possible.

Here's what I've tried so far:

link

css css3

asked by anonymous 17.04.2018 / 15:38

1 answer

Scrolling image gallery error when generating angle build

score 0 · Accepted Answer

Elender is possible yes.

I used pseudo element ::after and box-shadow to do:

p > span {
    background-color: peachpuff;
    display: inline-block;
    height: 1.25rem;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}
p > span::after {
    content: "";
    width: 100%;
    height: 1.25em;
    background-color: peachpuff;
    position: absolute;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    top: -120%;
    left: 0;
    box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.35);
}

<p>Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit. Atque pariatur, doloremque, ea labore voluptate provident quae eligendi <span>dolor aliquid corporis cupiditate magnam repudiandae, ut obcaecati.</span> Dolorum in inventore distinctio libero impedit veniam aperiam voluptatibus dolores? Voluptas labore at ullam sunt? Sed non aperiam molestiae numquam provident maxime illo dolorem earum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque pariatur, doloremque, ea labore voluptate provident quae eligendi <span>dolor aliquid corporis cupiditate magnam repudiandae, ut obcaecati.</span> Dolorum in inventore distinctio libero impedit veniam aperiam voluptatibus dolores? Voluptas labore at ullam sunt? Sed non aperiam <span>molestiae numquam provident</span> maxime illo dolorem earum?</p>