• Linear-gradient ()

    Use to create an image that represents a linear gradient of two or more colors

    Linear-gradient (side-or-corner, Angle, Linear-color-stop, color-hint) Side-or-corner: Describes the starting point of the gradient lineangleUse the Angle value to specify the gradient direction linear-color-stop where the gradient stopsCopy the code

    Example 1:

    background: linear-gradient(to left, # 333.# 333 30%.#eee 70%.# 333 10%);
Copy the code

Example 2:

background: linear-gradient(217deg.rgba(255.0.0.8), rgba(255.0.0.0) 70.71%),
            linear-gradient(127deg.rgba(0.255.0.8), rgba(0.255.0.0) 70.71%),
            linear-gradient(336deg.rgba(0.0.255.8), rgba(0.0.255.0) 70.71%);
Copy the code

  • Radial gradient: radial radial

    A gradual transition between two or more colors starting from the origin

    radial-gradient(position, shape, size, color-stop, extent-keyword)
positionThe initial position of the image shape the gradient size The size of the gradient color-stop the fixed color value of a certain position the extent-keyword describes the specific position of the edge contouring Color-hint: color transition pointCopy the code

Example 1:

background: radial-gradient(circle at 100%.# 333.# 333 50%.#eee 75%.# 333 75%);
Copy the code

Example 2: `

background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);
Copy the code

Example 3:

radial-gradient(closest-side circle at 50px 50px, yellow, red);
Copy the code

Example 4:

radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
                radial-gradient(30px circle, red, red 29px, transparent 30px);
Copy the code

  • Repeat gradient: repeating-Linear-gradient ()/repeating-radial-gradient()

Final example:

<div id="homer" aria-label="Homer Simpson" role="img"></div>
<style>
html {
  --bg: #fff;
  background: var(--bg);
}

#homer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
  background-repeat: no-repeat;
  background-image:
    /* hair */
    radial-gradient(ellipse 100% 95% at 58.75% 80%.# 0000 45%, black 0 49.5%.# 0000 0),
    radial-gradient(ellipse 102% 95% at 66.75% 70%.# 0000 45%, black 0 49.5%.# 0000 0),
    linear-gradient(82deg.# 0000 40%, black 0 50%.# 0000 0),
    linear-gradient(42deg.# 0000 30%, black 0 37%.# 0000 0),
    linear-gradient(90deg.# 0000 40%, black 0 50%.# 0000 0),
    linear-gradient(52deg.# 0000 62%, black 0 68%.# 0000 0),
    /* pupils */
    radial-gradient(circle at 43.5% 45.5%, black 2%.# 0000 0),
    radial-gradient(circle at 64% 41.5%, black 1.75%.# 0000 0),
    /* eye 1* /radial-gradient(ellipse 54% 51% at 44.5% 45%, white 17%, black 0 18.5%.# 0000 0),
    /* nose */
    radial-gradient(ellipse 54% 51% at 0% 74.8%, white 51%, black 0 61%.# 0000 0),
    radial-gradient(circle at 150% 500%, white 88.75%, black 0 90.25%.# 0000 0),
    radial-gradient(circle at -85% -510%.#f000 89.88%, black 0 90.75%.# 0000 0),
    /* smile */
    radial-gradient(circle at 110% 60%.# 0000 50%, black 0 65%.# 0000 0),
    /* eye 2* /radial-gradient(ellipse 50% 47% at 60.5% 42%, white 17%, black 0 18.5%.# 0000 0),
    /* neck */
    radial-gradient(circle at -350% 120%.# 0000 79.5%.# 000 0 80.25%.# 0000 0 92%.# 0000 0),
    radial-gradient(circle at 350% -90%.# 0000 85%.# 000 0 88%.# 0000 0 92%.# 0000 0),
    /* mouth */
    radial-gradient(circle at 40% -500%.# 0000 90.5%.# 000 0 92%.# 0000 0 92%.# 0000 0),
    radial-gradient(circle at -30% 112%.# 0000 59%.# 000 0 62.5%.# 0000 0),
    radial-gradient(circle at -40% 20%.# 0000 52%.# 000 0 63%.# 0000 0),
    radial-gradient(circle at 0% 52%, white 35%.# 000 0 45%.# 0000 0),
    /* chin */
    linear-gradient(var(--bg), var(--bg)),
    radial-gradient(ellipse 62% 57% at 53% 71%.# 0000 24%, black 0 25.5%.# 0000 0),
    /* ear */
    radial-gradient(ellipse 50% 55% at 75% 50%.# 0000 75%, black 0 90%.# 0000 0),
    radial-gradient(circle at 50% 110%.# 0000 50%, black 0 65%.# 0000 0),
    radial-gradient(circle at 110% 40%.# 0000 50%, black 0 65%.# 0000 0),
    /* eyebrow */
    radial-gradient(circle at -20% 84%.# 0000 55%, black 0 65%.# 0000 0),
    /* cheek */
    radial-gradient(circle at -10% 50%.# 0000 55%, black 0 65%.# 0000 0);background-size:
    /* hair */
    18% 23%.17% 20%.8% 8%.8% 8%.8% 9%.8% 8%,
    /* pupils */
    100% 100%.100% 100%,
    /* eye 1* /100% 100%,
    /* nose */
    15% 15%.10% 10%.14.5% 15%,
    /* smile */
    3.5% 3.5%,
    /* eye 2* /100% 100%,
    /* neck */
    25% 18%.10% 10%,
    /* mouth */
    34% 10%.15% 12.5%.5% 5%.5% 12%,
    /* chin */
    40% 23%.100% 100%,
    /* ear */
    10% 10%.3.5% 3.5%.3.5% 2.5%,
    /* eyebrow */
    5.5% 7%,
    /* cheek */
    5.5% 7%
    ;
  background-position:
    /* hair */
    31% -1%.23.5% 7%.24% 56%.26.9% 52.6%.29.25% 52.25%.30% 51.75%,
    /* pupils */
    0 0.0 0,
    /* eye 1* /0 0,
    /* nose */
    72.75% 46%.58% 47.25%.58.88% 57%,
    /* smile */
    41.5% 72.5%,
    /* eye 2* /0 0,
    /* neck */
    43% 83%.70% 89%,
    /* mouth */
    63% 73%.76% 59%.70% 75.5%.78% 69%,
    /* chin */
    84% 69.5%.0 0,
    /* ear */
    28% 65%.31.5% 63.5%.31.75% 64.5%,
    /* eyebrow */
    66% 30.75%,
    /* cheek */
    69.5% 51%
    ;
}

#homer::before {
  content: "";
  box-sizing: border-box;
  border: 0.8 vmin solid;
  position: absolute;
  top: 12%;
  left: 21%;
  width: 43%;
  height: 42%;
  border-radius: 100% / 90% 85% 95% 0%;
  transform: rotate(-25deg);
  background: transparent;
  clip-path: polygon(0% 0%.100% 0%.100% 63%.0% 96%);
  box-shadow: inset -2vmin 1vmin 0 -1vmin white;
  box-shadow: inset -2vmin 1vmin 0 -1vmin var(--bg);
}
</style>
Copy the code

Refer to the article MDN Codepen by Zhang Xinxu