Gradient color stops

Utilities for controlling the color stops in background gradients


Class reference

ClassProperties
from-black--tw-gradient-from: rgba(0, 0, 0, var(--tw-gradient-from-opacity));
 
from-white--tw-gradient-from: rgba(255, 255, 255, var(--tw-gradient-from-opacity));
 
from-gray-0--tw-gradient-from: rgba(248, 248, 250, var(--tw-gradient-from-opacity));
 
from-gray-100--tw-gradient-from: rgba(242, 241, 246, var(--tw-gradient-from-opacity));
 
from-gray-200--tw-gradient-from: rgba(229, 228, 233, var(--tw-gradient-from-opacity));
 
from-gray-300--tw-gradient-from: rgba(204, 203, 209, var(--tw-gradient-from-opacity));
 
from-gray-400--tw-gradient-from: rgba(169, 168, 175, var(--tw-gradient-from-opacity));
 
from-gray-500--tw-gradient-from: rgba(119, 118, 127, var(--tw-gradient-from-opacity));
 
from-gray-600--tw-gradient-from: rgba(85, 84, 93, var(--tw-gradient-from-opacity));
 
from-gray-700--tw-gradient-from: rgba(53, 52, 60, var(--tw-gradient-from-opacity));
 
from-gray-800--tw-gradient-from: rgba(34, 33, 40, var(--tw-gradient-from-opacity));
 
from-gray-900--tw-gradient-from: rgba(15, 13, 22, var(--tw-gradient-from-opacity));
 
from-gray--tw-gradient-from: rgba(229, 228, 233, var(--tw-gradient-from-opacity));
 
from-violet-0--tw-gradient-from: rgba(248, 245, 255, var(--tw-gradient-from-opacity));
 
from-violet-100--tw-gradient-from: rgba(237, 224, 254, var(--tw-gradient-from-opacity));
 
from-violet-200--tw-gradient-from: rgba(215, 188, 253, var(--tw-gradient-from-opacity));
 
from-violet-300--tw-gradient-from: rgba(180, 130, 250, var(--tw-gradient-from-opacity));
 
from-violet-400--tw-gradient-from: rgba(149, 83, 248, var(--tw-gradient-from-opacity));
 
from-violet-500--tw-gradient-from: rgba(104, 12, 233, var(--tw-gradient-from-opacity));
 
from-violet-600--tw-gradient-from: rgba(89, 0, 190, var(--tw-gradient-from-opacity));
 
from-violet-700--tw-gradient-from: rgba(68, 0, 135, var(--tw-gradient-from-opacity));
 
from-violet-800--tw-gradient-from: rgba(52, 0, 96, var(--tw-gradient-from-opacity));
 
from-violet-900--tw-gradient-from: rgba(30, 0, 51, var(--tw-gradient-from-opacity));
 
from-violet--tw-gradient-from: rgba(104, 12, 233, var(--tw-gradient-from-opacity));
 
from-magenta-0--tw-gradient-from: rgba(251, 245, 255, var(--tw-gradient-from-opacity));
 
from-magenta-100--tw-gradient-from: rgba(245, 222, 254, var(--tw-gradient-from-opacity));
 
from-magenta-200--tw-gradient-from: rgba(238, 188, 252, var(--tw-gradient-from-opacity));
 
from-magenta-300--tw-gradient-from: rgba(225, 129, 243, var(--tw-gradient-from-opacity));
 
from-magenta-400--tw-gradient-from: rgba(200, 70, 224, var(--tw-gradient-from-opacity));
 
from-magenta-500--tw-gradient-from: rgba(191, 4, 220, var(--tw-gradient-from-opacity));
 
from-magenta-600--tw-gradient-from: rgba(163, 0, 168, var(--tw-gradient-from-opacity));
 
from-magenta-700--tw-gradient-from: rgba(146, 0, 138, var(--tw-gradient-from-opacity));
 
from-magenta-800--tw-gradient-from: rgba(122, 3, 115, var(--tw-gradient-from-opacity));
 
from-magenta-900--tw-gradient-from: rgba(52, 0, 43, var(--tw-gradient-from-opacity));
 
from-magenta--tw-gradient-from: rgba(191, 4, 220, var(--tw-gradient-from-opacity));
 
from-blue-0--tw-gradient-from: rgba(229, 250, 255, var(--tw-gradient-from-opacity));
 
from-blue-100--tw-gradient-from: rgba(198, 236, 252, var(--tw-gradient-from-opacity));
 
from-blue-200--tw-gradient-from: rgba(163, 211, 251, var(--tw-gradient-from-opacity));
 
from-blue-300--tw-gradient-from: rgba(118, 170, 239, var(--tw-gradient-from-opacity));
 
from-blue-400--tw-gradient-from: rgba(75, 122, 217, var(--tw-gradient-from-opacity));
 
from-blue-500--tw-gradient-from: rgba(33, 87, 206, var(--tw-gradient-from-opacity));
 
from-blue-600--tw-gradient-from: rgba(31, 62, 170, var(--tw-gradient-from-opacity));
 
from-blue-700--tw-gradient-from: rgba(13, 34, 126, var(--tw-gradient-from-opacity));
 
from-blue-800--tw-gradient-from: rgba(1, 20, 94, var(--tw-gradient-from-opacity));
 
from-blue-900--tw-gradient-from: rgba(0, 6, 47, var(--tw-gradient-from-opacity));
 
from-blue--tw-gradient-from: rgba(118, 170, 239, var(--tw-gradient-from-opacity));
 
from-teal-0--tw-gradient-from: rgba(214, 255, 245, var(--tw-gradient-from-opacity));
 
from-teal-100--tw-gradient-from: rgba(181, 246, 233, var(--tw-gradient-from-opacity));
 
from-teal-200--tw-gradient-from: rgba(118, 228, 215, var(--tw-gradient-from-opacity));
 
from-teal-300--tw-gradient-from: rgba(60, 203, 197, var(--tw-gradient-from-opacity));
 
from-teal-400--tw-gradient-from: rgba(42, 161, 164, var(--tw-gradient-from-opacity));
 
from-teal-500--tw-gradient-from: rgba(20, 127, 135, var(--tw-gradient-from-opacity));
 
from-teal-600--tw-gradient-from: rgba(3, 104, 115, var(--tw-gradient-from-opacity));
 
from-teal-700--tw-gradient-from: rgba(3, 65, 79, var(--tw-gradient-from-opacity));
 
from-teal-800--tw-gradient-from: rgba(1, 44, 52, var(--tw-gradient-from-opacity));
 
from-teal-900--tw-gradient-from: rgba(0, 24, 30, var(--tw-gradient-from-opacity));
 
from-teal--tw-gradient-from: rgba(60, 203, 197, var(--tw-gradient-from-opacity));
 
from-green-0--tw-gradient-from: rgba(235, 255, 231, var(--tw-gradient-from-opacity));
 
from-green-100--tw-gradient-from: rgba(207, 248, 199, var(--tw-gradient-from-opacity));
 
from-green-200--tw-gradient-from: rgba(145, 234, 153, var(--tw-gradient-from-opacity));
 
from-green-300--tw-gradient-from: rgba(64, 208, 102, var(--tw-gradient-from-opacity));
 
from-green-400--tw-gradient-from: rgba(50, 168, 89, var(--tw-gradient-from-opacity));
 
from-green-500--tw-gradient-from: rgba(20, 133, 64, var(--tw-gradient-from-opacity));
 
from-green-600--tw-gradient-from: rgba(1, 110, 58, var(--tw-gradient-from-opacity));
 
from-green-700--tw-gradient-from: rgba(6, 72, 38, var(--tw-gradient-from-opacity));
 
from-green-800--tw-gradient-from: rgba(1, 44, 23, var(--tw-gradient-from-opacity));
 
from-green-900--tw-gradient-from: rgba(0, 26, 13, var(--tw-gradient-from-opacity));
 
from-green--tw-gradient-from: rgba(64, 208, 102, var(--tw-gradient-from-opacity));
 
from-yellow-0--tw-gradient-from: rgba(255, 250, 236, var(--tw-gradient-from-opacity));
 
from-yellow-100--tw-gradient-from: rgba(249, 241, 201, var(--tw-gradient-from-opacity));
 
from-yellow-200--tw-gradient-from: rgba(237, 231, 142, var(--tw-gradient-from-opacity));
 
from-yellow-300--tw-gradient-from: rgba(212, 205, 82, var(--tw-gradient-from-opacity));
 
from-yellow-400--tw-gradient-from: rgba(176, 170, 49, var(--tw-gradient-from-opacity));
 
from-yellow-500--tw-gradient-from: rgba(126, 127, 27, var(--tw-gradient-from-opacity));
 
from-yellow-600--tw-gradient-from: rgba(99, 100, 8, var(--tw-gradient-from-opacity));
 
from-yellow-700--tw-gradient-from: rgba(66, 64, 6, var(--tw-gradient-from-opacity));
 
from-yellow-800--tw-gradient-from: rgba(42, 38, 1, var(--tw-gradient-from-opacity));
 
from-yellow-900--tw-gradient-from: rgba(25, 23, 0, var(--tw-gradient-from-opacity));
 
from-yellow--tw-gradient-from: rgba(212, 205, 82, var(--tw-gradient-from-opacity));
 
from-orange-0--tw-gradient-from: rgba(255, 245, 241, var(--tw-gradient-from-opacity));
 
from-orange-100--tw-gradient-from: rgba(254, 219, 206, var(--tw-gradient-from-opacity));
 
from-orange-200--tw-gradient-from: rgba(255, 196, 164, var(--tw-gradient-from-opacity));
 
from-orange-300--tw-gradient-from: rgba(242, 153, 91, var(--tw-gradient-from-opacity));
 
from-orange-400--tw-gradient-from: rgba(223, 122, 48, var(--tw-gradient-from-opacity));
 
from-orange-500--tw-gradient-from: rgba(180, 95, 25, var(--tw-gradient-from-opacity));
 
from-orange-600--tw-gradient-from: rgba(144, 72, 8, var(--tw-gradient-from-opacity));
 
from-orange-700--tw-gradient-from: rgba(99, 50, 3, var(--tw-gradient-from-opacity));
 
from-orange-800--tw-gradient-from: rgba(68, 33, 0, var(--tw-gradient-from-opacity));
 
from-orange-900--tw-gradient-from: rgba(45, 17, 0, var(--tw-gradient-from-opacity));
 
from-orange--tw-gradient-from: rgba(242, 153, 91, var(--tw-gradient-from-opacity));
 
from-red-0--tw-gradient-from: rgba(255, 244, 244, var(--tw-gradient-from-opacity));
 
from-red-100--tw-gradient-from: rgba(253, 194, 196, var(--tw-gradient-from-opacity));
 
from-red-200--tw-gradient-from: rgba(253, 176, 177, var(--tw-gradient-from-opacity));
 
from-red-300--tw-gradient-from: rgba(250, 115, 112, var(--tw-gradient-from-opacity));
 
from-red-400--tw-gradient-from: rgba(224, 69, 66, var(--tw-gradient-from-opacity));
 
from-red-500--tw-gradient-from: rgba(192, 44, 33, var(--tw-gradient-from-opacity));
 
from-red-600--tw-gradient-from: rgba(164, 28, 30, var(--tw-gradient-from-opacity));
 
from-red-700--tw-gradient-from: rgba(123, 10, 12, var(--tw-gradient-from-opacity));
 
from-red-800--tw-gradient-from: rgba(87, 3, 5, var(--tw-gradient-from-opacity));
 
from-red-900--tw-gradient-from: rgba(58, 1, 2, var(--tw-gradient-from-opacity));
 
from-red--tw-gradient-from: rgba(250, 115, 112, var(--tw-gradient-from-opacity));
 
from-pink-0--tw-gradient-from: rgba(255, 243, 255, var(--tw-gradient-from-opacity));
 
from-pink-100--tw-gradient-from: rgba(254, 221, 250, var(--tw-gradient-from-opacity));
 
from-pink-200--tw-gradient-from: rgba(253, 177, 231, var(--tw-gradient-from-opacity));
 
from-pink-300--tw-gradient-from: rgba(243, 115, 192, var(--tw-gradient-from-opacity));
 
from-pink-400--tw-gradient-from: rgba(229, 67, 153, var(--tw-gradient-from-opacity));
 
from-pink-500--tw-gradient-from: rgba(190, 39, 109, var(--tw-gradient-from-opacity));
 
from-pink-600--tw-gradient-from: rgba(165, 23, 80, var(--tw-gradient-from-opacity));
 
from-pink-700--tw-gradient-from: rgba(116, 8, 48, var(--tw-gradient-from-opacity));
 
from-pink-800--tw-gradient-from: rgba(85, 2, 32, var(--tw-gradient-from-opacity));
 
from-pink-900--tw-gradient-from: rgba(61, 1, 21, var(--tw-gradient-from-opacity));
 
from-pink--tw-gradient-from: rgba(243, 115, 192, var(--tw-gradient-from-opacity));
 
from-light--tw-gradient-from: rgba(248, 248, 250, var(--tw-gradient-from-opacity));
 
from-dark--tw-gradient-from: rgba(53, 52, 60, var(--tw-gradient-from-opacity));
 
from-primary--tw-gradient-from: rgba(104, 12, 233, var(--tw-gradient-from-opacity));
 
from-primary-light--tw-gradient-from: rgba(149, 83, 248, var(--tw-gradient-from-opacity));
 
from-primary-dark--tw-gradient-from: rgba(89, 0, 190, var(--tw-gradient-from-opacity));
 
from-secondary--tw-gradient-from: rgba(30, 0, 51, var(--tw-gradient-from-opacity));
 
from-secondary-light--tw-gradient-from: rgba(68, 0, 135, var(--tw-gradient-from-opacity));
 
from-secondary-dark--tw-gradient-from: rgba(52, 0, 96, var(--tw-gradient-from-opacity));
 
from-info--tw-gradient-from: rgba(118, 170, 239, var(--tw-gradient-from-opacity));
 
from-info-light--tw-gradient-from: rgba(163, 211, 251, var(--tw-gradient-from-opacity));
 
from-info-dark--tw-gradient-from: rgba(75, 122, 217, var(--tw-gradient-from-opacity));
 
from-success--tw-gradient-from: rgba(64, 208, 102, var(--tw-gradient-from-opacity));
 
from-success-light--tw-gradient-from: rgba(145, 234, 153, var(--tw-gradient-from-opacity));
 
from-success-dark--tw-gradient-from: rgba(50, 168, 89, var(--tw-gradient-from-opacity));
 
from-warning--tw-gradient-from: rgba(212, 205, 82, var(--tw-gradient-from-opacity));
 
from-warning-light--tw-gradient-from: rgba(237, 231, 142, var(--tw-gradient-from-opacity));
 
from-warning-dark--tw-gradient-from: rgba(176, 170, 49, var(--tw-gradient-from-opacity));
 
from-danger--tw-gradient-from: rgba(250, 115, 112, var(--tw-gradient-from-opacity));
 
from-danger-light--tw-gradient-from: rgba(253, 176, 177, var(--tw-gradient-from-opacity));
 
from-danger-dark--tw-gradient-from: rgba(224, 69, 66, var(--tw-gradient-from-opacity));
 
from-brand-primary--tw-gradient-from: rgba(104, 12, 233, var(--tw-gradient-from-opacity));
 
from-brand-accent--tw-gradient-from: rgba(191, 4, 220, var(--tw-gradient-from-opacity));
 
from-brand-secondary--tw-gradient-from: rgba(30, 0, 51, var(--tw-gradient-from-opacity));
 
from-brand-dark--tw-gradient-from: rgba(53, 52, 60, var(--tw-gradient-from-opacity));
 
via-black--tw-gradient-via: rgba(0, 0, 0, var(--tw-gradient-via-opacity));
 
via-white--tw-gradient-via: rgba(255, 255, 255, var(--tw-gradient-via-opacity));
 
via-gray-0--tw-gradient-via: rgba(248, 248, 250, var(--tw-gradient-via-opacity));
 
via-gray-100--tw-gradient-via: rgba(242, 241, 246, var(--tw-gradient-via-opacity));
 
via-gray-200--tw-gradient-via: rgba(229, 228, 233, var(--tw-gradient-via-opacity));
 
via-gray-300--tw-gradient-via: rgba(204, 203, 209, var(--tw-gradient-via-opacity));
 
via-gray-400--tw-gradient-via: rgba(169, 168, 175, var(--tw-gradient-via-opacity));
 
via-gray-500--tw-gradient-via: rgba(119, 118, 127, var(--tw-gradient-via-opacity));
 
via-gray-600--tw-gradient-via: rgba(85, 84, 93, var(--tw-gradient-via-opacity));
 
via-gray-700--tw-gradient-via: rgba(53, 52, 60, var(--tw-gradient-via-opacity));
 
via-gray-800--tw-gradient-via: rgba(34, 33, 40, var(--tw-gradient-via-opacity));
 
via-gray-900--tw-gradient-via: rgba(15, 13, 22, var(--tw-gradient-via-opacity));
 
via-gray--tw-gradient-via: rgba(229, 228, 233, var(--tw-gradient-via-opacity));
 
via-violet-0--tw-gradient-via: rgba(248, 245, 255, var(--tw-gradient-via-opacity));
 
via-violet-100--tw-gradient-via: rgba(237, 224, 254, var(--tw-gradient-via-opacity));
 
via-violet-200--tw-gradient-via: rgba(215, 188, 253, var(--tw-gradient-via-opacity));
 
via-violet-300--tw-gradient-via: rgba(180, 130, 250, var(--tw-gradient-via-opacity));
 
via-violet-400--tw-gradient-via: rgba(149, 83, 248, var(--tw-gradient-via-opacity));
 
via-violet-500--tw-gradient-via: rgba(104, 12, 233, var(--tw-gradient-via-opacity));
 
via-violet-600--tw-gradient-via: rgba(89, 0, 190, var(--tw-gradient-via-opacity));
 
via-violet-700--tw-gradient-via: rgba(68, 0, 135, var(--tw-gradient-via-opacity));
 
via-violet-800--tw-gradient-via: rgba(52, 0, 96, var(--tw-gradient-via-opacity));
 
via-violet-900--tw-gradient-via: rgba(30, 0, 51, var(--tw-gradient-via-opacity));
 
via-violet--tw-gradient-via: rgba(104, 12, 233, var(--tw-gradient-via-opacity));
 
via-magenta-0--tw-gradient-via: rgba(251, 245, 255, var(--tw-gradient-via-opacity));
 
via-magenta-100--tw-gradient-via: rgba(245, 222, 254, var(--tw-gradient-via-opacity));
 
via-magenta-200--tw-gradient-via: rgba(238, 188, 252, var(--tw-gradient-via-opacity));
 
via-magenta-300--tw-gradient-via: rgba(225, 129, 243, var(--tw-gradient-via-opacity));
 
via-magenta-400--tw-gradient-via: rgba(200, 70, 224, var(--tw-gradient-via-opacity));
 
via-magenta-500--tw-gradient-via: rgba(191, 4, 220, var(--tw-gradient-via-opacity));
 
via-magenta-600--tw-gradient-via: rgba(163, 0, 168, var(--tw-gradient-via-opacity));
 
via-magenta-700--tw-gradient-via: rgba(146, 0, 138, var(--tw-gradient-via-opacity));
 
via-magenta-800--tw-gradient-via: rgba(122, 3, 115, var(--tw-gradient-via-opacity));
 
via-magenta-900--tw-gradient-via: rgba(52, 0, 43, var(--tw-gradient-via-opacity));
 
via-magenta--tw-gradient-via: rgba(191, 4, 220, var(--tw-gradient-via-opacity));
 
via-blue-0--tw-gradient-via: rgba(229, 250, 255, var(--tw-gradient-via-opacity));
 
via-blue-100--tw-gradient-via: rgba(198, 236, 252, var(--tw-gradient-via-opacity));
 
via-blue-200--tw-gradient-via: rgba(163, 211, 251, var(--tw-gradient-via-opacity));
 
via-blue-300--tw-gradient-via: rgba(118, 170, 239, var(--tw-gradient-via-opacity));
 
via-blue-400--tw-gradient-via: rgba(75, 122, 217, var(--tw-gradient-via-opacity));
 
via-blue-500--tw-gradient-via: rgba(33, 87, 206, var(--tw-gradient-via-opacity));
 
via-blue-600--tw-gradient-via: rgba(31, 62, 170, var(--tw-gradient-via-opacity));
 
via-blue-700--tw-gradient-via: rgba(13, 34, 126, var(--tw-gradient-via-opacity));
 
via-blue-800--tw-gradient-via: rgba(1, 20, 94, var(--tw-gradient-via-opacity));
 
via-blue-900--tw-gradient-via: rgba(0, 6, 47, var(--tw-gradient-via-opacity));
 
via-blue--tw-gradient-via: rgba(118, 170, 239, var(--tw-gradient-via-opacity));
 
via-teal-0--tw-gradient-via: rgba(214, 255, 245, var(--tw-gradient-via-opacity));
 
via-teal-100--tw-gradient-via: rgba(181, 246, 233, var(--tw-gradient-via-opacity));
 
via-teal-200--tw-gradient-via: rgba(118, 228, 215, var(--tw-gradient-via-opacity));
 
via-teal-300--tw-gradient-via: rgba(60, 203, 197, var(--tw-gradient-via-opacity));
 
via-teal-400--tw-gradient-via: rgba(42, 161, 164, var(--tw-gradient-via-opacity));
 
via-teal-500--tw-gradient-via: rgba(20, 127, 135, var(--tw-gradient-via-opacity));
 
via-teal-600--tw-gradient-via: rgba(3, 104, 115, var(--tw-gradient-via-opacity));
 
via-teal-700--tw-gradient-via: rgba(3, 65, 79, var(--tw-gradient-via-opacity));
 
via-teal-800--tw-gradient-via: rgba(1, 44, 52, var(--tw-gradient-via-opacity));
 
via-teal-900--tw-gradient-via: rgba(0, 24, 30, var(--tw-gradient-via-opacity));
 
via-teal--tw-gradient-via: rgba(60, 203, 197, var(--tw-gradient-via-opacity));
 
via-green-0--tw-gradient-via: rgba(235, 255, 231, var(--tw-gradient-via-opacity));
 
via-green-100--tw-gradient-via: rgba(207, 248, 199, var(--tw-gradient-via-opacity));
 
via-green-200--tw-gradient-via: rgba(145, 234, 153, var(--tw-gradient-via-opacity));
 
via-green-300--tw-gradient-via: rgba(64, 208, 102, var(--tw-gradient-via-opacity));
 
via-green-400--tw-gradient-via: rgba(50, 168, 89, var(--tw-gradient-via-opacity));
 
via-green-500--tw-gradient-via: rgba(20, 133, 64, var(--tw-gradient-via-opacity));
 
via-green-600--tw-gradient-via: rgba(1, 110, 58, var(--tw-gradient-via-opacity));
 
via-green-700--tw-gradient-via: rgba(6, 72, 38, var(--tw-gradient-via-opacity));
 
via-green-800--tw-gradient-via: rgba(1, 44, 23, var(--tw-gradient-via-opacity));
 
via-green-900--tw-gradient-via: rgba(0, 26, 13, var(--tw-gradient-via-opacity));
 
via-green--tw-gradient-via: rgba(64, 208, 102, var(--tw-gradient-via-opacity));
 
via-yellow-0--tw-gradient-via: rgba(255, 250, 236, var(--tw-gradient-via-opacity));
 
via-yellow-100--tw-gradient-via: rgba(249, 241, 201, var(--tw-gradient-via-opacity));
 
via-yellow-200--tw-gradient-via: rgba(237, 231, 142, var(--tw-gradient-via-opacity));
 
via-yellow-300--tw-gradient-via: rgba(212, 205, 82, var(--tw-gradient-via-opacity));
 
via-yellow-400--tw-gradient-via: rgba(176, 170, 49, var(--tw-gradient-via-opacity));
 
via-yellow-500--tw-gradient-via: rgba(126, 127, 27, var(--tw-gradient-via-opacity));
 
via-yellow-600--tw-gradient-via: rgba(99, 100, 8, var(--tw-gradient-via-opacity));
 
via-yellow-700--tw-gradient-via: rgba(66, 64, 6, var(--tw-gradient-via-opacity));
 
via-yellow-800--tw-gradient-via: rgba(42, 38, 1, var(--tw-gradient-via-opacity));
 
via-yellow-900--tw-gradient-via: rgba(25, 23, 0, var(--tw-gradient-via-opacity));
 
via-yellow--tw-gradient-via: rgba(212, 205, 82, var(--tw-gradient-via-opacity));
 
via-orange-0--tw-gradient-via: rgba(255, 245, 241, var(--tw-gradient-via-opacity));
 
via-orange-100--tw-gradient-via: rgba(254, 219, 206, var(--tw-gradient-via-opacity));
 
via-orange-200--tw-gradient-via: rgba(255, 196, 164, var(--tw-gradient-via-opacity));
 
via-orange-300--tw-gradient-via: rgba(242, 153, 91, var(--tw-gradient-via-opacity));
 
via-orange-400--tw-gradient-via: rgba(223, 122, 48, var(--tw-gradient-via-opacity));
 
via-orange-500--tw-gradient-via: rgba(180, 95, 25, var(--tw-gradient-via-opacity));
 
via-orange-600--tw-gradient-via: rgba(144, 72, 8, var(--tw-gradient-via-opacity));
 
via-orange-700--tw-gradient-via: rgba(99, 50, 3, var(--tw-gradient-via-opacity));
 
via-orange-800--tw-gradient-via: rgba(68, 33, 0, var(--tw-gradient-via-opacity));
 
via-orange-900--tw-gradient-via: rgba(45, 17, 0, var(--tw-gradient-via-opacity));
 
via-orange--tw-gradient-via: rgba(242, 153, 91, var(--tw-gradient-via-opacity));
 
via-red-0--tw-gradient-via: rgba(255, 244, 244, var(--tw-gradient-via-opacity));
 
via-red-100--tw-gradient-via: rgba(253, 194, 196, var(--tw-gradient-via-opacity));
 
via-red-200--tw-gradient-via: rgba(253, 176, 177, var(--tw-gradient-via-opacity));
 
via-red-300--tw-gradient-via: rgba(250, 115, 112, var(--tw-gradient-via-opacity));
 
via-red-400--tw-gradient-via: rgba(224, 69, 66, var(--tw-gradient-via-opacity));
 
via-red-500--tw-gradient-via: rgba(192, 44, 33, var(--tw-gradient-via-opacity));
 
via-red-600--tw-gradient-via: rgba(164, 28, 30, var(--tw-gradient-via-opacity));
 
via-red-700--tw-gradient-via: rgba(123, 10, 12, var(--tw-gradient-via-opacity));
 
via-red-800--tw-gradient-via: rgba(87, 3, 5, var(--tw-gradient-via-opacity));
 
via-red-900--tw-gradient-via: rgba(58, 1, 2, var(--tw-gradient-via-opacity));
 
via-red--tw-gradient-via: rgba(250, 115, 112, var(--tw-gradient-via-opacity));
 
via-pink-0--tw-gradient-via: rgba(255, 243, 255, var(--tw-gradient-via-opacity));
 
via-pink-100--tw-gradient-via: rgba(254, 221, 250, var(--tw-gradient-via-opacity));
 
via-pink-200--tw-gradient-via: rgba(253, 177, 231, var(--tw-gradient-via-opacity));
 
via-pink-300--tw-gradient-via: rgba(243, 115, 192, var(--tw-gradient-via-opacity));
 
via-pink-400--tw-gradient-via: rgba(229, 67, 153, var(--tw-gradient-via-opacity));
 
via-pink-500--tw-gradient-via: rgba(190, 39, 109, var(--tw-gradient-via-opacity));
 
via-pink-600--tw-gradient-via: rgba(165, 23, 80, var(--tw-gradient-via-opacity));
 
via-pink-700--tw-gradient-via: rgba(116, 8, 48, var(--tw-gradient-via-opacity));
 
via-pink-800--tw-gradient-via: rgba(85, 2, 32, var(--tw-gradient-via-opacity));
 
via-pink-900--tw-gradient-via: rgba(61, 1, 21, var(--tw-gradient-via-opacity));
 
via-pink--tw-gradient-via: rgba(243, 115, 192, var(--tw-gradient-via-opacity));
 
via-light--tw-gradient-via: rgba(248, 248, 250, var(--tw-gradient-via-opacity));
 
via-dark--tw-gradient-via: rgba(53, 52, 60, var(--tw-gradient-via-opacity));
 
via-primary--tw-gradient-via: rgba(104, 12, 233, var(--tw-gradient-via-opacity));
 
via-primary-light--tw-gradient-via: rgba(149, 83, 248, var(--tw-gradient-via-opacity));
 
via-primary-dark--tw-gradient-via: rgba(89, 0, 190, var(--tw-gradient-via-opacity));
 
via-secondary--tw-gradient-via: rgba(30, 0, 51, var(--tw-gradient-via-opacity));
 
via-secondary-light--tw-gradient-via: rgba(68, 0, 135, var(--tw-gradient-via-opacity));
 
via-secondary-dark--tw-gradient-via: rgba(52, 0, 96, var(--tw-gradient-via-opacity));
 
via-info--tw-gradient-via: rgba(118, 170, 239, var(--tw-gradient-via-opacity));
 
via-info-light--tw-gradient-via: rgba(163, 211, 251, var(--tw-gradient-via-opacity));
 
via-info-dark--tw-gradient-via: rgba(75, 122, 217, var(--tw-gradient-via-opacity));
 
via-success--tw-gradient-via: rgba(64, 208, 102, var(--tw-gradient-via-opacity));
 
via-success-light--tw-gradient-via: rgba(145, 234, 153, var(--tw-gradient-via-opacity));
 
via-success-dark--tw-gradient-via: rgba(50, 168, 89, var(--tw-gradient-via-opacity));
 
via-warning--tw-gradient-via: rgba(212, 205, 82, var(--tw-gradient-via-opacity));
 
via-warning-light--tw-gradient-via: rgba(237, 231, 142, var(--tw-gradient-via-opacity));
 
via-warning-dark--tw-gradient-via: rgba(176, 170, 49, var(--tw-gradient-via-opacity));
 
via-danger--tw-gradient-via: rgba(250, 115, 112, var(--tw-gradient-via-opacity));
 
via-danger-light--tw-gradient-via: rgba(253, 176, 177, var(--tw-gradient-via-opacity));
 
via-danger-dark--tw-gradient-via: rgba(224, 69, 66, var(--tw-gradient-via-opacity));
 
via-brand-primary--tw-gradient-via: rgba(104, 12, 233, var(--tw-gradient-via-opacity));
 
via-brand-accent--tw-gradient-via: rgba(191, 4, 220, var(--tw-gradient-via-opacity));
 
via-brand-secondary--tw-gradient-via: rgba(30, 0, 51, var(--tw-gradient-via-opacity));
 
via-brand-dark--tw-gradient-via: rgba(53, 52, 60, var(--tw-gradient-via-opacity));
 
to-black--tw-gradient-to: rgba(0, 0, 0, var(--tw-gradient-to-opacity));
 
to-white--tw-gradient-to: rgba(255, 255, 255, var(--tw-gradient-to-opacity));
 
to-gray-0--tw-gradient-to: rgba(248, 248, 250, var(--tw-gradient-to-opacity));
 
to-gray-100--tw-gradient-to: rgba(242, 241, 246, var(--tw-gradient-to-opacity));
 
to-gray-200--tw-gradient-to: rgba(229, 228, 233, var(--tw-gradient-to-opacity));
 
to-gray-300--tw-gradient-to: rgba(204, 203, 209, var(--tw-gradient-to-opacity));
 
to-gray-400--tw-gradient-to: rgba(169, 168, 175, var(--tw-gradient-to-opacity));
 
to-gray-500--tw-gradient-to: rgba(119, 118, 127, var(--tw-gradient-to-opacity));
 
to-gray-600--tw-gradient-to: rgba(85, 84, 93, var(--tw-gradient-to-opacity));
 
to-gray-700--tw-gradient-to: rgba(53, 52, 60, var(--tw-gradient-to-opacity));
 
to-gray-800--tw-gradient-to: rgba(34, 33, 40, var(--tw-gradient-to-opacity));
 
to-gray-900--tw-gradient-to: rgba(15, 13, 22, var(--tw-gradient-to-opacity));
 
to-gray--tw-gradient-to: rgba(229, 228, 233, var(--tw-gradient-to-opacity));
 
to-violet-0--tw-gradient-to: rgba(248, 245, 255, var(--tw-gradient-to-opacity));
 
to-violet-100--tw-gradient-to: rgba(237, 224, 254, var(--tw-gradient-to-opacity));
 
to-violet-200--tw-gradient-to: rgba(215, 188, 253, var(--tw-gradient-to-opacity));
 
to-violet-300--tw-gradient-to: rgba(180, 130, 250, var(--tw-gradient-to-opacity));
 
to-violet-400--tw-gradient-to: rgba(149, 83, 248, var(--tw-gradient-to-opacity));
 
to-violet-500--tw-gradient-to: rgba(104, 12, 233, var(--tw-gradient-to-opacity));
 
to-violet-600--tw-gradient-to: rgba(89, 0, 190, var(--tw-gradient-to-opacity));
 
to-violet-700--tw-gradient-to: rgba(68, 0, 135, var(--tw-gradient-to-opacity));
 
to-violet-800--tw-gradient-to: rgba(52, 0, 96, var(--tw-gradient-to-opacity));
 
to-violet-900--tw-gradient-to: rgba(30, 0, 51, var(--tw-gradient-to-opacity));
 
to-violet--tw-gradient-to: rgba(104, 12, 233, var(--tw-gradient-to-opacity));
 
to-magenta-0--tw-gradient-to: rgba(251, 245, 255, var(--tw-gradient-to-opacity));
 
to-magenta-100--tw-gradient-to: rgba(245, 222, 254, var(--tw-gradient-to-opacity));
 
to-magenta-200--tw-gradient-to: rgba(238, 188, 252, var(--tw-gradient-to-opacity));
 
to-magenta-300--tw-gradient-to: rgba(225, 129, 243, var(--tw-gradient-to-opacity));
 
to-magenta-400--tw-gradient-to: rgba(200, 70, 224, var(--tw-gradient-to-opacity));
 
to-magenta-500--tw-gradient-to: rgba(191, 4, 220, var(--tw-gradient-to-opacity));
 
to-magenta-600--tw-gradient-to: rgba(163, 0, 168, var(--tw-gradient-to-opacity));
 
to-magenta-700--tw-gradient-to: rgba(146, 0, 138, var(--tw-gradient-to-opacity));
 
to-magenta-800--tw-gradient-to: rgba(122, 3, 115, var(--tw-gradient-to-opacity));
 
to-magenta-900--tw-gradient-to: rgba(52, 0, 43, var(--tw-gradient-to-opacity));
 
to-magenta--tw-gradient-to: rgba(191, 4, 220, var(--tw-gradient-to-opacity));
 
to-blue-0--tw-gradient-to: rgba(229, 250, 255, var(--tw-gradient-to-opacity));
 
to-blue-100--tw-gradient-to: rgba(198, 236, 252, var(--tw-gradient-to-opacity));
 
to-blue-200--tw-gradient-to: rgba(163, 211, 251, var(--tw-gradient-to-opacity));
 
to-blue-300--tw-gradient-to: rgba(118, 170, 239, var(--tw-gradient-to-opacity));
 
to-blue-400--tw-gradient-to: rgba(75, 122, 217, var(--tw-gradient-to-opacity));
 
to-blue-500--tw-gradient-to: rgba(33, 87, 206, var(--tw-gradient-to-opacity));
 
to-blue-600--tw-gradient-to: rgba(31, 62, 170, var(--tw-gradient-to-opacity));
 
to-blue-700--tw-gradient-to: rgba(13, 34, 126, var(--tw-gradient-to-opacity));
 
to-blue-800--tw-gradient-to: rgba(1, 20, 94, var(--tw-gradient-to-opacity));
 
to-blue-900--tw-gradient-to: rgba(0, 6, 47, var(--tw-gradient-to-opacity));
 
to-blue--tw-gradient-to: rgba(118, 170, 239, var(--tw-gradient-to-opacity));
 
to-teal-0--tw-gradient-to: rgba(214, 255, 245, var(--tw-gradient-to-opacity));
 
to-teal-100--tw-gradient-to: rgba(181, 246, 233, var(--tw-gradient-to-opacity));
 
to-teal-200--tw-gradient-to: rgba(118, 228, 215, var(--tw-gradient-to-opacity));
 
to-teal-300--tw-gradient-to: rgba(60, 203, 197, var(--tw-gradient-to-opacity));
 
to-teal-400--tw-gradient-to: rgba(42, 161, 164, var(--tw-gradient-to-opacity));
 
to-teal-500--tw-gradient-to: rgba(20, 127, 135, var(--tw-gradient-to-opacity));
 
to-teal-600--tw-gradient-to: rgba(3, 104, 115, var(--tw-gradient-to-opacity));
 
to-teal-700--tw-gradient-to: rgba(3, 65, 79, var(--tw-gradient-to-opacity));
 
to-teal-800--tw-gradient-to: rgba(1, 44, 52, var(--tw-gradient-to-opacity));
 
to-teal-900--tw-gradient-to: rgba(0, 24, 30, var(--tw-gradient-to-opacity));
 
to-teal--tw-gradient-to: rgba(60, 203, 197, var(--tw-gradient-to-opacity));
 
to-green-0--tw-gradient-to: rgba(235, 255, 231, var(--tw-gradient-to-opacity));
 
to-green-100--tw-gradient-to: rgba(207, 248, 199, var(--tw-gradient-to-opacity));
 
to-green-200--tw-gradient-to: rgba(145, 234, 153, var(--tw-gradient-to-opacity));
 
to-green-300--tw-gradient-to: rgba(64, 208, 102, var(--tw-gradient-to-opacity));
 
to-green-400--tw-gradient-to: rgba(50, 168, 89, var(--tw-gradient-to-opacity));
 
to-green-500--tw-gradient-to: rgba(20, 133, 64, var(--tw-gradient-to-opacity));
 
to-green-600--tw-gradient-to: rgba(1, 110, 58, var(--tw-gradient-to-opacity));
 
to-green-700--tw-gradient-to: rgba(6, 72, 38, var(--tw-gradient-to-opacity));
 
to-green-800--tw-gradient-to: rgba(1, 44, 23, var(--tw-gradient-to-opacity));
 
to-green-900--tw-gradient-to: rgba(0, 26, 13, var(--tw-gradient-to-opacity));
 
to-green--tw-gradient-to: rgba(64, 208, 102, var(--tw-gradient-to-opacity));
 
to-yellow-0--tw-gradient-to: rgba(255, 250, 236, var(--tw-gradient-to-opacity));
 
to-yellow-100--tw-gradient-to: rgba(249, 241, 201, var(--tw-gradient-to-opacity));
 
to-yellow-200--tw-gradient-to: rgba(237, 231, 142, var(--tw-gradient-to-opacity));
 
to-yellow-300--tw-gradient-to: rgba(212, 205, 82, var(--tw-gradient-to-opacity));
 
to-yellow-400--tw-gradient-to: rgba(176, 170, 49, var(--tw-gradient-to-opacity));
 
to-yellow-500--tw-gradient-to: rgba(126, 127, 27, var(--tw-gradient-to-opacity));
 
to-yellow-600--tw-gradient-to: rgba(99, 100, 8, var(--tw-gradient-to-opacity));
 
to-yellow-700--tw-gradient-to: rgba(66, 64, 6, var(--tw-gradient-to-opacity));
 
to-yellow-800--tw-gradient-to: rgba(42, 38, 1, var(--tw-gradient-to-opacity));
 
to-yellow-900--tw-gradient-to: rgba(25, 23, 0, var(--tw-gradient-to-opacity));
 
to-yellow--tw-gradient-to: rgba(212, 205, 82, var(--tw-gradient-to-opacity));
 
to-orange-0--tw-gradient-to: rgba(255, 245, 241, var(--tw-gradient-to-opacity));
 
to-orange-100--tw-gradient-to: rgba(254, 219, 206, var(--tw-gradient-to-opacity));
 
to-orange-200--tw-gradient-to: rgba(255, 196, 164, var(--tw-gradient-to-opacity));
 
to-orange-300--tw-gradient-to: rgba(242, 153, 91, var(--tw-gradient-to-opacity));
 
to-orange-400--tw-gradient-to: rgba(223, 122, 48, var(--tw-gradient-to-opacity));
 
to-orange-500--tw-gradient-to: rgba(180, 95, 25, var(--tw-gradient-to-opacity));
 
to-orange-600--tw-gradient-to: rgba(144, 72, 8, var(--tw-gradient-to-opacity));
 
to-orange-700--tw-gradient-to: rgba(99, 50, 3, var(--tw-gradient-to-opacity));
 
to-orange-800--tw-gradient-to: rgba(68, 33, 0, var(--tw-gradient-to-opacity));
 
to-orange-900--tw-gradient-to: rgba(45, 17, 0, var(--tw-gradient-to-opacity));
 
to-orange--tw-gradient-to: rgba(242, 153, 91, var(--tw-gradient-to-opacity));
 
to-red-0--tw-gradient-to: rgba(255, 244, 244, var(--tw-gradient-to-opacity));
 
to-red-100--tw-gradient-to: rgba(253, 194, 196, var(--tw-gradient-to-opacity));
 
to-red-200--tw-gradient-to: rgba(253, 176, 177, var(--tw-gradient-to-opacity));
 
to-red-300--tw-gradient-to: rgba(250, 115, 112, var(--tw-gradient-to-opacity));
 
to-red-400--tw-gradient-to: rgba(224, 69, 66, var(--tw-gradient-to-opacity));
 
to-red-500--tw-gradient-to: rgba(192, 44, 33, var(--tw-gradient-to-opacity));
 
to-red-600--tw-gradient-to: rgba(164, 28, 30, var(--tw-gradient-to-opacity));
 
to-red-700--tw-gradient-to: rgba(123, 10, 12, var(--tw-gradient-to-opacity));
 
to-red-800--tw-gradient-to: rgba(87, 3, 5, var(--tw-gradient-to-opacity));
 
to-red-900--tw-gradient-to: rgba(58, 1, 2, var(--tw-gradient-to-opacity));
 
to-red--tw-gradient-to: rgba(250, 115, 112, var(--tw-gradient-to-opacity));
 
to-pink-0--tw-gradient-to: rgba(255, 243, 255, var(--tw-gradient-to-opacity));
 
to-pink-100--tw-gradient-to: rgba(254, 221, 250, var(--tw-gradient-to-opacity));
 
to-pink-200--tw-gradient-to: rgba(253, 177, 231, var(--tw-gradient-to-opacity));
 
to-pink-300--tw-gradient-to: rgba(243, 115, 192, var(--tw-gradient-to-opacity));
 
to-pink-400--tw-gradient-to: rgba(229, 67, 153, var(--tw-gradient-to-opacity));
 
to-pink-500--tw-gradient-to: rgba(190, 39, 109, var(--tw-gradient-to-opacity));
 
to-pink-600--tw-gradient-to: rgba(165, 23, 80, var(--tw-gradient-to-opacity));
 
to-pink-700--tw-gradient-to: rgba(116, 8, 48, var(--tw-gradient-to-opacity));
 
to-pink-800--tw-gradient-to: rgba(85, 2, 32, var(--tw-gradient-to-opacity));
 
to-pink-900--tw-gradient-to: rgba(61, 1, 21, var(--tw-gradient-to-opacity));
 
to-pink--tw-gradient-to: rgba(243, 115, 192, var(--tw-gradient-to-opacity));
 
to-light--tw-gradient-to: rgba(248, 248, 250, var(--tw-gradient-to-opacity));
 
to-dark--tw-gradient-to: rgba(53, 52, 60, var(--tw-gradient-to-opacity));
 
to-primary--tw-gradient-to: rgba(104, 12, 233, var(--tw-gradient-to-opacity));
 
to-primary-light--tw-gradient-to: rgba(149, 83, 248, var(--tw-gradient-to-opacity));
 
to-primary-dark--tw-gradient-to: rgba(89, 0, 190, var(--tw-gradient-to-opacity));
 
to-secondary--tw-gradient-to: rgba(30, 0, 51, var(--tw-gradient-to-opacity));
 
to-secondary-light--tw-gradient-to: rgba(68, 0, 135, var(--tw-gradient-to-opacity));
 
to-secondary-dark--tw-gradient-to: rgba(52, 0, 96, var(--tw-gradient-to-opacity));
 
to-info--tw-gradient-to: rgba(118, 170, 239, var(--tw-gradient-to-opacity));
 
to-info-light--tw-gradient-to: rgba(163, 211, 251, var(--tw-gradient-to-opacity));
 
to-info-dark--tw-gradient-to: rgba(75, 122, 217, var(--tw-gradient-to-opacity));
 
to-success--tw-gradient-to: rgba(64, 208, 102, var(--tw-gradient-to-opacity));
 
to-success-light--tw-gradient-to: rgba(145, 234, 153, var(--tw-gradient-to-opacity));
 
to-success-dark--tw-gradient-to: rgba(50, 168, 89, var(--tw-gradient-to-opacity));
 
to-warning--tw-gradient-to: rgba(212, 205, 82, var(--tw-gradient-to-opacity));
 
to-warning-light--tw-gradient-to: rgba(237, 231, 142, var(--tw-gradient-to-opacity));
 
to-warning-dark--tw-gradient-to: rgba(176, 170, 49, var(--tw-gradient-to-opacity));
 
to-danger--tw-gradient-to: rgba(250, 115, 112, var(--tw-gradient-to-opacity));
 
to-danger-light--tw-gradient-to: rgba(253, 176, 177, var(--tw-gradient-to-opacity));
 
to-danger-dark--tw-gradient-to: rgba(224, 69, 66, var(--tw-gradient-to-opacity));
 
to-brand-primary--tw-gradient-to: rgba(104, 12, 233, var(--tw-gradient-to-opacity));
 
to-brand-accent--tw-gradient-to: rgba(191, 4, 220, var(--tw-gradient-to-opacity));
 
to-brand-secondary--tw-gradient-to: rgba(30, 0, 51, var(--tw-gradient-to-opacity));
 
to-brand-dark--tw-gradient-to: rgba(53, 52, 60, var(--tw-gradient-to-opacity));
 

Starting color

Set the starting color of a gradient using the from-{color} utilities.

<div class="h-24 rounded bg-gradient-to-r from-magenta-300"></div>

Gradients do not to transparent by default.

Ending color

Set the ending color of a gradient using the to-{color} utilities.

<div class="h-24 rounded bg-gradient-to-r from-teal-400 to-blue-300"></div>

Middle color

Add a middle color to a gradient using the via-{color} utilities.

<div class="h-24 rounded bg-gradient-to-r from-violet-400 via-pink-300 to-red-300"></div>

Gradients with a from-{color} and via-{color} will not fade out to transparent by default.

Responsive

To control the gradient color stops of an element at a specific breakpoint, add a {screen}: prefix to any existing gradient color stop utility. For example, use md:from-green-300 to apply the from-green-300 utility at only medium screen sizes and above.

<div class="bg-gradient-to-r from-violet-400 md:from-orange-300"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

Hover

To control the gradient color stops of an element on hover, add the hover: prefix to any existing gradient color stop utility. For example, use hover:bg-blue-300 to apply the bg-blue-300 utility on hover.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 hover:from-pink-300 hover:to-orange-300 btn btn-lg text-white rounded">
Hover me
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-300 md:hover:from-blue-500 ...">Button</button>

Focus

To control the gradient color stops of an element on focus, add the focus: prefix to any existing gradient color stop utility. For example, use focus:bg-blue-300 to apply the bg-blue-300 utility on focus.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 focus:from-pink-300 focus:to-orange-300 btn btn-lg text-white rounded">
Focus me
</button>

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-300 md:focus:from-blue-500 ...">Button</button>