Làm cách nào để tạo màu gradient cho văn bản trong css?

Cách tạo độ dốc văn bản trong CSS

Để áp dụng màu gradient cho văn bản của bạn, trước tiên, bạn cần tạo một gradient nền

.text-gradient {
  /* color: linear-gradient(to right, darkblue, darkorchid); 👈 not working */
  background: linear-gradient(to right, darkblue, darkorchid);
}

sau đó, bạn cần cắt nền bằng cách sử dụng văn bản làm mặt nạ cắt và ẩn văn bản

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

Để dần dần hỗ trợ tất cả các trình duyệt

.text-gradient {
  /* 👇 show a solid color in older browsers (e.g., IE11) */
  color: darkblue;
}

/* 👇 show the text gradient in modern browsers */
@supports (--css: variables) {
  .text-gradient {
    background: linear-gradient(to right, darkblue, darkorchid);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Kỹ thuật này cho phép bạn áp dụng chuyển màu cho một từ hoặc nhiều dòng văn bản

Đây là một ví dụ

Chỉ cần đảm bảo không lạm dụng nó. Không bao giờ được sử dụng chuyển màu cho văn bản dài hơn. Thay vào đó, hãy sử dụng chúng để làm cho tiêu đề hoặc các từ cụ thể bắt mắt hơn

Điều có thể làm bạn ngạc nhiên — đặc biệt nếu bạn đã có kinh nghiệm trước đó với các công cụ thiết kế — là bạn không thể trực tiếp đặt chuyển màu làm màu văn bản. Ví dụ:

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

2 sẽ không hoạt động

Nhưng văn bản chuyển màu có thể đạt được trong CSS, nó chỉ yêu cầu một vài bước bổ sung

Tốt nhất là bắt đầu với một số văn bản in đậm lớn. Điều này sẽ làm cho gradient rõ hơn và văn bản dễ đọc hơn

Văn bản tôi sẽ sử dụng được tạo kiểu bằng tốc ký phông chữ với các giá trị sau

font: bold 120px Poppins, sans-serif;

Bước 1. Thêm một dải màu

Đầu tiên, chúng ta cần thêm gradient làm nền

Theo mặc định, gradient sẽ đi từ trên xuống dưới, nhưng chúng ta cũng có thể chỉ định hướng

Nếu bạn muốn chuyển màu theo chiều ngang,

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

3 sẽ phù hợp, nhưng một góc nhỏ như

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

4 trông tự nhiên hơn

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

Nếu bạn muốn tìm hiểu cách tạo bất kỳ dải màu nào bạn muốn hoặc chỉ đơn giản là cần làm mới lại, hãy xem Hướng dẫn cơ bản về Dải màu CSS của tôi

Bước 2. kẹp nó

Bây giờ chúng ta cần làm cho gradient chỉ hiển thị vị trí của văn bản. Chúng ta có thể làm điều đó bằng cách sử dụng

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

5

Bạn có thể tìm hiểu thêm về điều này và các thuộc tính nền khác, trong bài viết của tôi về tất cả các thuộc tính nền

Bạn có thể đã biết rằng thuộc tính này cho phép chúng ta cắt nền vào đường viền, phần đệm hoặc nội dung của một phần tử

Nhưng nó cũng có thể cắt nền cho văn bản

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}

Nếu bạn thử mã này, nó sẽ giống như gradient vừa biến mất. Đó là bởi vì độ dốc nằm dưới văn bản

Bước 3. Tiết lộ

Để hiển thị gradient bên dưới văn bản của chúng tôi, chúng tôi cần làm cho văn bản trong suốt. Chúng ta có thể làm điều đó bằng cách đặt

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

6

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}

Bạn có thể muốn sử dụng tốc ký nền ở đây. Đừng

Thật không may, phiên bản tốc ký

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

0 của

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

5 không hỗ trợ từ khóa

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

2

dự phòng

Nếu bạn phải hỗ trợ Internet Explorer, bạn sẽ cần chuyển sang màu phẳng

Gói tất cả những gì chúng tôi đã viết trước đây trong một quy tắc

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

3. Bằng cách này, nó sẽ chỉ được hiển thị trong các trình duyệt hiện đại

Sau đó, bên ngoài khối

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
}

3, đặt màu dự phòng cho văn bản. Nó có thể phải là một màu xuất hiện trong dải màu của bạn và hoạt động tốt với phần còn lại của thiết kế

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

1

Đảm bảo dự phòng xuất hiện trước các kiểu gradient thực tế

GHI CHÚ. Mặc dù bản thân quy tắc @supports cũng không được hỗ trợ trong IE, mọi thứ bên trong vẫn sẽ bị bỏ qua, đó chính xác là những gì chúng tôi muốn