Home

Cara membuat Text gradient

toat sarang
toat sarang
5 effek text gradient
No.1

h1 {
  text-align: center;
  font-size: 72px;
  /* 
  * key code 
  */
  color: #e23b4a;
  background: -webkit-linear-gradient(330deg, #23966c 0%, #faaa54 25%, #e23b4a 50%, #db0768 75%, #360670 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 
  * end key code 
  */
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 48px; }
}

<h1>1.CENGGINI SARANG</h1>


No.2 (effek Animation)


@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size:42px;
  text-transform:uppercase;
  color: transparent;
    background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  background-size: 1000px 100%;
  animation: bg 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes bg {
<h1>2.cenggini sarang</h1>

No.3

.text-gradient {
    display: inline-block;
    background-image: linear-gradient(to right, #8941db 0%, #42ddd8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


body { margin: 2em;}
<h1 class="text-gradient">3.CENGGINI SARANG</h1>

No.4 (effeck Animation)

@import url('https://fonts.googleapis.com/css?family=Barrio');



.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  
}
.gradient-text {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    color: #FF1361;
    background-color: #FF1361;
    background: -o-linear-gradient(left, #FFF800 10% , #FF1361, #44107A, #7794ff);
    background: -webkit-linear-gradient(left, #FFF800 10% , #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text.text1 {
  -webkit-animation: dancingColors 2s infinite forwards ease-in-out;
          animation: dancingColors 2s infinite forwards ease-in-out;
  margin-bottom: 5%;
}
.gradient-text.text2 {
  -webkit-animation: dancingColors 2s -0.5s infinite forwards ease-in-out;
          animation: dancingColors 2s -0.5s infinite forwards ease-in-out;
}

@media screen and (min-width:0\0) {
    /* IE9 and IE10 hack */
    .gradient-text {
        background: transparent;
    }
}

@-moz-document url-prefix() {
  /* Firefox hack */
.gradient-text {
    background-color: transparent;
    }
}

body {
  background: black;
  text-align: center;
}
.gradient-text.text1 {
  font-size: 40px;
  font-size: calc(20px + (40 - 20) * (100vw - 400px) / (1000 - 400));
  font-family: 'Barrio', cursive;
}
.gradient-text.text2 {
    font-size: 30px;
  font-size: calc(20px + (30 - 20) * (100vw - 400px) / (1000 - 400));
  font-family: 'Barrio', cursive;
}


@-webkit-keyframes dancingColors {
  50% {
   //  background: -webkit-linear-gradient(left, #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-position: -860px;
  }
}



@keyframes dancingColors {
  50% {
   //  background: -webkit-linear-gradient(left, #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-position: -860px;
  }
}
<div class="container">
<div class="gradient-text text1">I am a gradient text in modern browsers.</div>
<div class="gradient-text text2">I am a pink text in very old browsers.</div>
</div>

Terakhir

p
{
  margin:0px;
}

.text
{
  font-family:'Work Sans',sans-serif;
  font-size:200px;
  background-image:url('https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
  /*a linear gradient can also be used instead of image.*/
  background-size:cover;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip: text;
}
.text1
{
   font-family:'Work Sans',sans-serif;
  font-size:80px;
  background-image:url('https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
   background-attachment: fixed;
  background-size:cover;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip: text; 
}
@media only screen and (max-width:715px)
{
  .text
  {
    font-size:150px;
  }
  .text1
  {
    font-size:70px;
  }
}
@media only screen and (max-width:615px)
{
  .text
  {
    font-size:100px;
  }
  .text1
  {
    font-size:50px;
  }
}
@media only screen and (max-width:415px)
{
  .text
  {
    font-size:80px;
  }
  .text1
  {
    font-size:35px;
  }
}
@media only screen and (max-width:285px)
{
  .text
  {
    font-size:60px;
  }
  .text1
  {
    font-size:20px;
  }
}
<div class="mainflex">
  <p class="text">cs</p>
  <p class="text1">cenggini sarang</p>
</div>

Terima kasih sudah berkunjung


Baca juga