Gradientes en CSS3 5b2s15

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en transición y animaciones. Uso interesante en CSS3 de Formas generadas - Shapes generated.

background:
  linear-gradient(currentColor, currentColor)
  50% / 50% 50%
  no-repeat;
 
background:
  linear-gradient(
    110deg,
    transparent 30%, currentColor 30%,
    currentColor 70%, transparent 70%
  )
  50% / 90% 40%
  no-repeat;
 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 75%
  no-repeat;
 
background:
  radial-gradient(
    circle at 50% 0%,
    currentColor 40%, transparent 40%
  )
  50% 100% / 60% 60%
  no-repeat;
 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 45%
  no-repeat;
 
background:
  radial-gradient(
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
 
background:
  linear-gradient(90deg, currentColor, currentColor)
  50% / 2px 75%
  no-repeat;
 
background:
  linear-gradient(
    -60deg,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
 
background:
  linear-gradient(
    -135deg, currentColor 50%, transparent 50%
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from 145deg,
    currentColor 0, currentColor 20%, transparent 20%
  )
  50% -50% / 80% 80%
  no-repeat;
 
background:
  conic-gradient(
    from 165deg at 50% -86%,
    currentColor 0, currentColor 8%, transparent 8%
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from -45deg,
    currentColor 25%, currentColor 50%,
    transparent 50%, transparent 75%,
    currentColor 75%
  )
  50% 120% / 30% 80%
  no-repeat;
 
background:
  conic-gradient(
    from 90deg at 0 0,
    transparent 25deg, currentColor 25deg,
    currentColor 65deg, transparent 65deg
  )
  50% / 50% 50%
  no-repeat;
 
background:
  conic-gradient(
    from 90deg,
    transparent 12.5%, currentColor 12.5%,
    currentColor 37.5%, transparent 37.5%,
    transparent 62.5%, currentColor 62.5%,
    currentColor 87.5%, transparent 87.5%
  )
  50% / 32% 50%
  no-repeat;
 
background:
  conic-gradient(
    transparent 60deg, currentColor 60deg,
    currentColor 120deg, transparent 120deg,
    transparent 240deg, currentColor 240deg,
    currentColor 300deg, transparent 300deg
  )
  50% / 50% 50%
  no-repeat;
 
background:
  repeating-linear-gradient(
    transparent -1%, transparent 14%,
    currentColor 14%, currentColor 28%
  )
  50% / 50% 60%
  no-repeat;

Este es el CSS, HTML en un ejemplo practico 221q1p

<style>
.section_item {
  padding: 10vw;
  z-index: 1;
  position: relative;
  text-align: center;
}

/* Background*/

.background1 {
background:
  linear-gradient(currentColor, currentColor)
  50% / 50% 50%
  no-repeat;
}

.background2 {
background:
  linear-gradient(
    110deg,
    transparent 30%, currentColor 30%,
    currentColor 70%, transparent 70%
  )
  50% / 90% 40%
  no-repeat;
}

.background3 {
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 75%
  no-repeat;
}

.background4 { 
background:
  radial-gradient(
    circle at 50% 0%,
    currentColor 40%, transparent 40%
  )
  50% 100% / 60% 60%
  no-repeat;
}

.background5 { 
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 45%
  no-repeat;
}

.background6 { 
background:
  radial-gradient(
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}

.background7 { 
background:
  linear-gradient(90deg, currentColor, currentColor)
  50% / 2px 75%
  no-repeat;
}

.background8 {
background:
  linear-gradient(
    -60deg,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}

.background9 {
background:
  linear-gradient(
    -135deg, currentColor 50%, transparent 50%
  )
  50% / 50% 50%
  no-repeat;
}

.background10 {
background:
  conic-gradient(
    from 145deg,
    currentColor 0, currentColor 20%, transparent 20%
  )
  50% -50% / 80% 80%
  no-repeat;
}

.background11 {
background:
  conic-gradient(
    from 165deg at 50% -86%,
    currentColor 0, currentColor 8%, transparent 8%
  )
  50% / 50% 50%
  no-repeat;
}

.background12 {
background:
  conic-gradient(
    from -45deg,
    currentColor 25%, currentColor 50%,
    transparent 50%, transparent 75%,
    currentColor 75%
  )
  50% 120% / 30% 80%
  no-repeat;
}

.background13 {
background:
  conic-gradient(
    from 90deg at 0 0,
    transparent 25deg, currentColor 25deg,
    currentColor 65deg, transparent 65deg
  )
  50% / 50% 50%
  no-repeat;
}

.background14 {
background:
  conic-gradient(
    from 90deg,
    transparent 12.5%, currentColor 12.5%,
    currentColor 37.5%, transparent 37.5%,
    transparent 62.5%, currentColor 62.5%,
    currentColor 87.5%, transparent 87.5%
  )
  50% / 32% 50%
  no-repeat;
}

.background15 {
background:
  conic-gradient(
    transparent 60deg, currentColor 60deg,
    currentColor 120deg, transparent 120deg,
    transparent 240deg, currentColor 240deg,
    currentColor 300deg, transparent 300deg
  )
  50% / 50% 50%
  no-repeat;
}

.background16 {
background:
  repeating-linear-gradient(
    transparent -1%, transparent 14%,
    currentColor 14%, currentColor 28%
  )
  50% / 50% 60%
  no-repeat;
}
</style>
<section class="section_item background1">
</section>
<section class="section_item background2">
</section>
<section class="section_item background3">
</section>
<section class="section_item background4">
</section>
<section class="section_item background5">
</section>
<section class="section_item background6">
</section>
<section class="section_item background7">
</section>
<section class="section_item background8">
</section>
<section class="section_item background9">
</section>
<section class="section_item background10">
</section>
<section class="section_item background11">
</section>
<section class="section_item background12">
</section>
<section class="section_item background13">
</section>
<section class="section_item background14">
</section>
<section class="section_item background15">
</section>
<section class="section_item background16">
</section>

Ver resultados