css text gradient, css fonts gradient .gradient-colors { background-image: linear-gradient(to left, violet, indigo, blue, g">
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  阅读(47)  评论(8编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
历史上的今天:
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
点击右上角即可分享
微信分享提示