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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15586085.html
未经授权禁止转载,违者必究!
标签:
CSS
, fonts
, gradient
, gradient background
, gradient color
, gradient text
, linear-gradient
, text gradient
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· Tinyfox 发生重大改版
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· 小米CR6606,CR6608,CR6609 启用SSH和刷入OpenWRT 23.05.5
· 近期最值得关注的AI技术报告与Agent综述!
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