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

Question

I was visiting the following website http://www.adventistadareformacompleta.org/os_livros_de_registros.html

And I thought maybe it would be possible.

Here’s what I’ve tried so far:

https://jsfiddle.net/elenderg/a89vga8f/

http://fiddle.jshell.net/elenderg/a89vga8f/25/show/dark/

Answer 1

Elender is possible yes.

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

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>