xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css text gradient All In One

css text gradient All In One

<div class="gradient-colors">
    css text gradient, css fonts gradient
</div>


.gradient-colors {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    // -webkit-background-size: 200% 100%;
}

online demo

bug, 文字过少,渐变看不到 ❓

linear-gradient


.colors {
  background: linear-gradient(135deg, #0f0, #f0f, #00f);
}


.colors {
  background: linear-gradient(to right bottom, #0f0, #f0f, #00f);
}

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(46)  评论(8编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2020-11-21 Battery API All In One
2020-11-21 如何使用 js 的 Promise 实现 Fetch 请求超时自动重试 All In One
2019-11-21 HTML5 Server-Sent Events
2019-11-21 Learning React in depth with React Official Documents
2019-11-21 js in depth & prototype & __proto__
2018-11-21 Access-Control-Allow-Methods: OPTIONS & CORS All In One
2015-11-21 IcoMoon 图标字体 Custom built and crisp icon fonts, done right
点击右上角即可分享
微信分享提示