gradient-background.html

<h2>To Right</h2>

<div style="background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); padding: 20px; margin: 25px 0 25px 0;">
    <div style="display: inline-block; width: 48%; vertical-align: top;">
        <div style="padding: 10px;"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Sternoptyx_diaphana1.jpg" alt="hatchetfish" /></div>
    </div>
    <div style="display: inline-block; width: 48%; vertical-align: top;">
        <div style="padding: 10px;">
            <h3><strong>Hatchetfish</strong></h3>
            <p>Marine hatchetfish bandfish South American darter shortnose chimaera threespine stickleback, goblin shark zebra shark flagfin northern squawfish skilfish silver driftfish. Plaice striped bass spiderfish roanoke bass parasitic catfish yellowtail snapper buffalofish ghost pipefish. Deep sea eel ladyfish Australasian salmon African lungfish sabertooth fish; round stingray.</p>
        </div>
    </div>
</div>

<h2>Horizontal Gradient</h2>
<div style="background: linear-gradient(to right, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Vertical Gradient</h2>
<div style="background: linear-gradient(to bottom, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Diagonal Gradient (Top-Left to Bottom-Right)</h2>
<div style="background: linear-gradient(to bottom right, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Diagonal Gradient (Top-Right to Bottom-Left)</h2>
<div style="background: linear-gradient(to bottom left, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Three-Color Gradient</h2>
<div style="background: linear-gradient(to right, #EAEAEA, #ADA996, #DBDBDB); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Four-Color Gradient</h2>
<div style="background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Radial Gradient</h2>
<div style="background: radial-gradient(circle, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Mirror Gradient</h2>
<div style="background: linear-gradient(to right, #EAEAEA, #ADA996, #EAEAEA); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Soft Edged Gradient</h2>
<div style="background: radial-gradient(circle at 50% 50%, #EAEAEA, #ADA996); padding: 20px; margin: 25px 0 25px 0;">...</div>

<h2>Sharp Central Focus</h2>
<div style="background: radial-gradient(circle at 50% 50%, #ADA996, #EAEAEA); padding: 20px; margin: 25px 0 25px 0;">...</div>