Gradation - yagisawatakuya/Wiki GitHub Wiki

グラデーション作成ツール

http://www.colorzilla.com/gradient-editor/

グラデーションボタン作成

// SCSS
.more {
    display: block;
    color: #fff;
    font-size: 118%;
    line-height: 57px;
    padding: 4px;
    opacity: 0.8;
    background-image: linear-gradient(to right, #000 0%, #000 100%);
    background-size: 100% auto;
    transition: 0.5s;

    span {
    display: inline-block;
    width: 100%;
    border: 1px solid #fff;
    position: relative;
    text-align: center;

    &::after {
        content: "";
        position: absolute;
        top: 33px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 55.172413793103445%;
        height: 1px;
        background-image: linear-gradient(to right, transparent, #fff 25%, #fff 75%, transparent);
        background-position: center;
        background-repeat: no-repeat;
        transform: scale(1, 1);
        transform-origin: right top;
        transition: transform .3s;
    }

    }

    &:hover {
    background-size: 200% auto;
    }
    &:hover span::after {
    transform: scale(0, 1);
    }

}

http://work.lifemake.design/entry/2017/06/01/180000 https://gradientbuttons.colorion.co/

文字をグラデーション

.sample {
  background: #333;
  background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

https://www.yuu-diaryblog.com/2017/03/14/post-10035/

CSSグラデーションを使ったデザインパーツサンプル

参考：https://www.nxworld.net/tips/design-parts-using-css-gradient.html DEMO：https://codepen.io/nxworld/full/BjXrzR