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(253, 248, 255, var(--tw-gradient-from-opacity));
 
from-gray-100--tw-gradient-from: rgba(248, 246, 249, var(--tw-gradient-from-opacity));
 
from-gray-200--tw-gradient-from: rgba(233, 231, 234, var(--tw-gradient-from-opacity));
 
from-gray-300--tw-gradient-from: rgba(207, 203, 206, var(--tw-gradient-from-opacity));
 
from-gray-400--tw-gradient-from: rgba(168, 163, 167, var(--tw-gradient-from-opacity));
 
from-gray-500--tw-gradient-from: rgba(123, 116, 121, var(--tw-gradient-from-opacity));
 
from-gray-600--tw-gradient-from: rgba(81, 75, 79, var(--tw-gradient-from-opacity));
 
from-gray-700--tw-gradient-from: rgba(52, 46, 50, var(--tw-gradient-from-opacity));
 
from-gray-800--tw-gradient-from: rgba(35, 30, 33, var(--tw-gradient-from-opacity));
 
from-gray-900--tw-gradient-from: rgba(26, 18, 23, var(--tw-gradient-from-opacity));
 
from-gray--tw-gradient-from: rgba(233, 231, 234, var(--tw-gradient-from-opacity));
 
from-violet-0--tw-gradient-from: rgba(246, 243, 255, var(--tw-gradient-from-opacity));
 
from-violet-100--tw-gradient-from: rgba(239, 228, 255, var(--tw-gradient-from-opacity));
 
from-violet-200--tw-gradient-from: rgba(220, 196, 255, var(--tw-gradient-from-opacity));
 
from-violet-300--tw-gradient-from: rgba(189, 144, 255, var(--tw-gradient-from-opacity));
 
from-violet-400--tw-gradient-from: rgba(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-from-opacity));
 
from-violet-800--tw-gradient-from: rgba(53, 0, 97, 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, 243, 255, var(--tw-gradient-from-opacity));
 
from-magenta-100--tw-gradient-from: rgba(247, 221, 255, var(--tw-gradient-from-opacity));
 
from-magenta-200--tw-gradient-from: rgba(239, 184, 253, var(--tw-gradient-from-opacity));
 
from-magenta-300--tw-gradient-from: rgba(229, 131, 247, var(--tw-gradient-from-opacity));
 
from-magenta-400--tw-gradient-from: rgba(213, 67, 237, 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(180, 0, 186, 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(99, 0, 86, var(--tw-gradient-from-opacity));
 
from-magenta-900--tw-gradient-from: rgba(51, 0, 41, 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(244, 253, 255, var(--tw-gradient-from-opacity));
 
from-blue-100--tw-gradient-from: rgba(194, 235, 253, var(--tw-gradient-from-opacity));
 
from-blue-200--tw-gradient-from: rgba(144, 201, 247, var(--tw-gradient-from-opacity));
 
from-blue-300--tw-gradient-from: rgba(100, 160, 235, var(--tw-gradient-from-opacity));
 
from-blue-400--tw-gradient-from: rgba(65, 119, 216, var(--tw-gradient-from-opacity));
 
from-blue-500--tw-gradient-from: rgba(39, 83, 191, var(--tw-gradient-from-opacity));
 
from-blue-600--tw-gradient-from: rgba(22, 55, 161, var(--tw-gradient-from-opacity));
 
from-blue-700--tw-gradient-from: rgba(11, 35, 129, var(--tw-gradient-from-opacity));
 
from-blue-800--tw-gradient-from: rgba(5, 21, 96, var(--tw-gradient-from-opacity));
 
from-blue-900--tw-gradient-from: rgba(2, 13, 64, var(--tw-gradient-from-opacity));
 
from-blue--tw-gradient-from: rgba(100, 160, 235, var(--tw-gradient-from-opacity));
 
from-teal-0--tw-gradient-from: rgba(244, 255, 252, var(--tw-gradient-from-opacity));
 
from-teal-100--tw-gradient-from: rgba(190, 248, 236, var(--tw-gradient-from-opacity));
 
from-teal-200--tw-gradient-from: rgba(135, 232, 220, var(--tw-gradient-from-opacity));
 
from-teal-300--tw-gradient-from: rgba(87, 205, 200, var(--tw-gradient-from-opacity));
 
from-teal-400--tw-gradient-from: rgba(50, 164, 168, var(--tw-gradient-from-opacity));
 
from-teal-500--tw-gradient-from: rgba(26, 119, 127, var(--tw-gradient-from-opacity));
 
from-teal-600--tw-gradient-from: rgba(12, 81, 90, var(--tw-gradient-from-opacity));
 
from-teal-700--tw-gradient-from: rgba(5, 54, 62, var(--tw-gradient-from-opacity));
 
from-teal-800--tw-gradient-from: rgba(2, 39, 45, var(--tw-gradient-from-opacity));
 
from-teal-900--tw-gradient-from: rgba(1, 32, 38, var(--tw-gradient-from-opacity));
 
from-teal--tw-gradient-from: rgba(87, 205, 200, var(--tw-gradient-from-opacity));
 
from-green-0--tw-gradient-from: rgba(246, 255, 244, var(--tw-gradient-from-opacity));
 
from-green-100--tw-gradient-from: rgba(192, 248, 190, var(--tw-gradient-from-opacity));
 
from-green-200--tw-gradient-from: rgba(135, 232, 145, var(--tw-gradient-from-opacity));
 
from-green-300--tw-gradient-from: rgba(87, 205, 113, var(--tw-gradient-from-opacity));
 
from-green-400--tw-gradient-from: rgba(50, 168, 87, var(--tw-gradient-from-opacity));
 
from-green-500--tw-gradient-from: rgba(26, 127, 64, var(--tw-gradient-from-opacity));
 
from-green-600--tw-gradient-from: rgba(12, 90, 45, var(--tw-gradient-from-opacity));
 
from-green-700--tw-gradient-from: rgba(5, 62, 32, var(--tw-gradient-from-opacity));
 
from-green-800--tw-gradient-from: rgba(2, 45, 23, var(--tw-gradient-from-opacity));
 
from-green-900--tw-gradient-from: rgba(1, 38, 20, var(--tw-gradient-from-opacity));
 
from-green--tw-gradient-from: rgba(87, 205, 113, var(--tw-gradient-from-opacity));
 
from-yellow-0--tw-gradient-from: rgba(255, 252, 244, var(--tw-gradient-from-opacity));
 
from-yellow-100--tw-gradient-from: rgba(249, 240, 191, var(--tw-gradient-from-opacity));
 
from-yellow-200--tw-gradient-from: rgba(234, 227, 136, var(--tw-gradient-from-opacity));
 
from-yellow-300--tw-gradient-from: rgba(206, 207, 88, var(--tw-gradient-from-opacity));
 
from-yellow-400--tw-gradient-from: rgba(162, 169, 51, var(--tw-gradient-from-opacity));
 
from-yellow-500--tw-gradient-from: rgba(114, 125, 25, var(--tw-gradient-from-opacity));
 
from-yellow-600--tw-gradient-from: rgba(74, 85, 11, var(--tw-gradient-from-opacity));
 
from-yellow-700--tw-gradient-from: rgba(48, 56, 5, var(--tw-gradient-from-opacity));
 
from-yellow-800--tw-gradient-from: rgba(33, 39, 2, var(--tw-gradient-from-opacity));
 
from-yellow-900--tw-gradient-from: rgba(27, 33, 1, var(--tw-gradient-from-opacity));
 
from-yellow--tw-gradient-from: rgba(206, 207, 88, var(--tw-gradient-from-opacity));
 
from-orange-0--tw-gradient-from: rgba(255, 247, 244, var(--tw-gradient-from-opacity));
 
from-orange-100--tw-gradient-from: rgba(253, 208, 188, var(--tw-gradient-from-opacity));
 
from-orange-200--tw-gradient-from: rgba(246, 171, 133, var(--tw-gradient-from-opacity));
 
from-orange-300--tw-gradient-from: rgba(233, 140, 85, var(--tw-gradient-from-opacity));
 
from-orange-400--tw-gradient-from: rgba(214, 114, 47, var(--tw-gradient-from-opacity));
 
from-orange-500--tw-gradient-from: rgba(187, 91, 22, var(--tw-gradient-from-opacity));
 
from-orange-600--tw-gradient-from: rgba(155, 70, 6, var(--tw-gradient-from-opacity));
 
from-orange-700--tw-gradient-from: rgba(121, 53, 0, var(--tw-gradient-from-opacity));
 
from-orange-800--tw-gradient-from: rgba(85, 38, 0, var(--tw-gradient-from-opacity));
 
from-orange-900--tw-gradient-from: rgba(51, 23, 0, var(--tw-gradient-from-opacity));
 
from-orange--tw-gradient-from: rgba(233, 140, 85, 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(247, 144, 146, var(--tw-gradient-from-opacity));
 
from-red-300--tw-gradient-from: rgba(235, 100, 103, var(--tw-gradient-from-opacity));
 
from-red-400--tw-gradient-from: rgba(216, 65, 68, var(--tw-gradient-from-opacity));
 
from-red-500--tw-gradient-from: rgba(191, 39, 42, var(--tw-gradient-from-opacity));
 
from-red-600--tw-gradient-from: rgba(161, 22, 24, var(--tw-gradient-from-opacity));
 
from-red-700--tw-gradient-from: rgba(129, 11, 13, var(--tw-gradient-from-opacity));
 
from-red-800--tw-gradient-from: rgba(96, 5, 7, var(--tw-gradient-from-opacity));
 
from-red-900--tw-gradient-from: rgba(64, 2, 3, var(--tw-gradient-from-opacity));
 
from-red--tw-gradient-from: rgba(235, 100, 103, var(--tw-gradient-from-opacity));
 
from-pink-0--tw-gradient-from: rgba(255, 244, 255, var(--tw-gradient-from-opacity));
 
from-pink-100--tw-gradient-from: rgba(253, 194, 245, var(--tw-gradient-from-opacity));
 
from-pink-200--tw-gradient-from: rgba(247, 144, 219, var(--tw-gradient-from-opacity));
 
from-pink-300--tw-gradient-from: rgba(235, 100, 182, var(--tw-gradient-from-opacity));
 
from-pink-400--tw-gradient-from: rgba(216, 65, 144, var(--tw-gradient-from-opacity));
 
from-pink-500--tw-gradient-from: rgba(191, 39, 108, var(--tw-gradient-from-opacity));
 
from-pink-600--tw-gradient-from: rgba(161, 22, 78, var(--tw-gradient-from-opacity));
 
from-pink-700--tw-gradient-from: rgba(129, 11, 54, var(--tw-gradient-from-opacity));
 
from-pink-800--tw-gradient-from: rgba(96, 5, 37, var(--tw-gradient-from-opacity));
 
from-pink-900--tw-gradient-from: rgba(64, 2, 23, var(--tw-gradient-from-opacity));
 
from-pink--tw-gradient-from: rgba(235, 100, 182, var(--tw-gradient-from-opacity));
 
from-light--tw-gradient-from: rgba(253, 248, 255, var(--tw-gradient-from-opacity));
 
from-dark--tw-gradient-from: rgba(52, 46, 50, 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(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-from-opacity));
 
from-secondary-dark--tw-gradient-from: rgba(53, 0, 97, var(--tw-gradient-from-opacity));
 
from-info--tw-gradient-from: rgba(100, 160, 235, var(--tw-gradient-from-opacity));
 
from-info-light--tw-gradient-from: rgba(144, 201, 247, var(--tw-gradient-from-opacity));
 
from-info-dark--tw-gradient-from: rgba(65, 119, 216, var(--tw-gradient-from-opacity));
 
from-success--tw-gradient-from: rgba(87, 205, 113, var(--tw-gradient-from-opacity));
 
from-success-light--tw-gradient-from: rgba(135, 232, 145, var(--tw-gradient-from-opacity));
 
from-success-dark--tw-gradient-from: rgba(50, 168, 87, var(--tw-gradient-from-opacity));
 
from-warning--tw-gradient-from: rgba(206, 207, 88, var(--tw-gradient-from-opacity));
 
from-warning-light--tw-gradient-from: rgba(234, 227, 136, var(--tw-gradient-from-opacity));
 
from-warning-dark--tw-gradient-from: rgba(162, 169, 51, var(--tw-gradient-from-opacity));
 
from-danger--tw-gradient-from: rgba(235, 100, 103, var(--tw-gradient-from-opacity));
 
from-danger-light--tw-gradient-from: rgba(247, 144, 146, var(--tw-gradient-from-opacity));
 
from-danger-dark--tw-gradient-from: rgba(216, 65, 68, 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(37, 13, 46, 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(253, 248, 255, var(--tw-gradient-via-opacity));
 
via-gray-100--tw-gradient-via: rgba(248, 246, 249, var(--tw-gradient-via-opacity));
 
via-gray-200--tw-gradient-via: rgba(233, 231, 234, var(--tw-gradient-via-opacity));
 
via-gray-300--tw-gradient-via: rgba(207, 203, 206, var(--tw-gradient-via-opacity));
 
via-gray-400--tw-gradient-via: rgba(168, 163, 167, var(--tw-gradient-via-opacity));
 
via-gray-500--tw-gradient-via: rgba(123, 116, 121, var(--tw-gradient-via-opacity));
 
via-gray-600--tw-gradient-via: rgba(81, 75, 79, var(--tw-gradient-via-opacity));
 
via-gray-700--tw-gradient-via: rgba(52, 46, 50, var(--tw-gradient-via-opacity));
 
via-gray-800--tw-gradient-via: rgba(35, 30, 33, var(--tw-gradient-via-opacity));
 
via-gray-900--tw-gradient-via: rgba(26, 18, 23, var(--tw-gradient-via-opacity));
 
via-gray--tw-gradient-via: rgba(233, 231, 234, var(--tw-gradient-via-opacity));
 
via-violet-0--tw-gradient-via: rgba(246, 243, 255, var(--tw-gradient-via-opacity));
 
via-violet-100--tw-gradient-via: rgba(239, 228, 255, var(--tw-gradient-via-opacity));
 
via-violet-200--tw-gradient-via: rgba(220, 196, 255, var(--tw-gradient-via-opacity));
 
via-violet-300--tw-gradient-via: rgba(189, 144, 255, var(--tw-gradient-via-opacity));
 
via-violet-400--tw-gradient-via: rgba(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-via-opacity));
 
via-violet-800--tw-gradient-via: rgba(53, 0, 97, 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, 243, 255, var(--tw-gradient-via-opacity));
 
via-magenta-100--tw-gradient-via: rgba(247, 221, 255, var(--tw-gradient-via-opacity));
 
via-magenta-200--tw-gradient-via: rgba(239, 184, 253, var(--tw-gradient-via-opacity));
 
via-magenta-300--tw-gradient-via: rgba(229, 131, 247, var(--tw-gradient-via-opacity));
 
via-magenta-400--tw-gradient-via: rgba(213, 67, 237, 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(180, 0, 186, 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(99, 0, 86, var(--tw-gradient-via-opacity));
 
via-magenta-900--tw-gradient-via: rgba(51, 0, 41, 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(244, 253, 255, var(--tw-gradient-via-opacity));
 
via-blue-100--tw-gradient-via: rgba(194, 235, 253, var(--tw-gradient-via-opacity));
 
via-blue-200--tw-gradient-via: rgba(144, 201, 247, var(--tw-gradient-via-opacity));
 
via-blue-300--tw-gradient-via: rgba(100, 160, 235, var(--tw-gradient-via-opacity));
 
via-blue-400--tw-gradient-via: rgba(65, 119, 216, var(--tw-gradient-via-opacity));
 
via-blue-500--tw-gradient-via: rgba(39, 83, 191, var(--tw-gradient-via-opacity));
 
via-blue-600--tw-gradient-via: rgba(22, 55, 161, var(--tw-gradient-via-opacity));
 
via-blue-700--tw-gradient-via: rgba(11, 35, 129, var(--tw-gradient-via-opacity));
 
via-blue-800--tw-gradient-via: rgba(5, 21, 96, var(--tw-gradient-via-opacity));
 
via-blue-900--tw-gradient-via: rgba(2, 13, 64, var(--tw-gradient-via-opacity));
 
via-blue--tw-gradient-via: rgba(100, 160, 235, var(--tw-gradient-via-opacity));
 
via-teal-0--tw-gradient-via: rgba(244, 255, 252, var(--tw-gradient-via-opacity));
 
via-teal-100--tw-gradient-via: rgba(190, 248, 236, var(--tw-gradient-via-opacity));
 
via-teal-200--tw-gradient-via: rgba(135, 232, 220, var(--tw-gradient-via-opacity));
 
via-teal-300--tw-gradient-via: rgba(87, 205, 200, var(--tw-gradient-via-opacity));
 
via-teal-400--tw-gradient-via: rgba(50, 164, 168, var(--tw-gradient-via-opacity));
 
via-teal-500--tw-gradient-via: rgba(26, 119, 127, var(--tw-gradient-via-opacity));
 
via-teal-600--tw-gradient-via: rgba(12, 81, 90, var(--tw-gradient-via-opacity));
 
via-teal-700--tw-gradient-via: rgba(5, 54, 62, var(--tw-gradient-via-opacity));
 
via-teal-800--tw-gradient-via: rgba(2, 39, 45, var(--tw-gradient-via-opacity));
 
via-teal-900--tw-gradient-via: rgba(1, 32, 38, var(--tw-gradient-via-opacity));
 
via-teal--tw-gradient-via: rgba(87, 205, 200, var(--tw-gradient-via-opacity));
 
via-green-0--tw-gradient-via: rgba(246, 255, 244, var(--tw-gradient-via-opacity));
 
via-green-100--tw-gradient-via: rgba(192, 248, 190, var(--tw-gradient-via-opacity));
 
via-green-200--tw-gradient-via: rgba(135, 232, 145, var(--tw-gradient-via-opacity));
 
via-green-300--tw-gradient-via: rgba(87, 205, 113, var(--tw-gradient-via-opacity));
 
via-green-400--tw-gradient-via: rgba(50, 168, 87, var(--tw-gradient-via-opacity));
 
via-green-500--tw-gradient-via: rgba(26, 127, 64, var(--tw-gradient-via-opacity));
 
via-green-600--tw-gradient-via: rgba(12, 90, 45, var(--tw-gradient-via-opacity));
 
via-green-700--tw-gradient-via: rgba(5, 62, 32, var(--tw-gradient-via-opacity));
 
via-green-800--tw-gradient-via: rgba(2, 45, 23, var(--tw-gradient-via-opacity));
 
via-green-900--tw-gradient-via: rgba(1, 38, 20, var(--tw-gradient-via-opacity));
 
via-green--tw-gradient-via: rgba(87, 205, 113, var(--tw-gradient-via-opacity));
 
via-yellow-0--tw-gradient-via: rgba(255, 252, 244, var(--tw-gradient-via-opacity));
 
via-yellow-100--tw-gradient-via: rgba(249, 240, 191, var(--tw-gradient-via-opacity));
 
via-yellow-200--tw-gradient-via: rgba(234, 227, 136, var(--tw-gradient-via-opacity));
 
via-yellow-300--tw-gradient-via: rgba(206, 207, 88, var(--tw-gradient-via-opacity));
 
via-yellow-400--tw-gradient-via: rgba(162, 169, 51, var(--tw-gradient-via-opacity));
 
via-yellow-500--tw-gradient-via: rgba(114, 125, 25, var(--tw-gradient-via-opacity));
 
via-yellow-600--tw-gradient-via: rgba(74, 85, 11, var(--tw-gradient-via-opacity));
 
via-yellow-700--tw-gradient-via: rgba(48, 56, 5, var(--tw-gradient-via-opacity));
 
via-yellow-800--tw-gradient-via: rgba(33, 39, 2, var(--tw-gradient-via-opacity));
 
via-yellow-900--tw-gradient-via: rgba(27, 33, 1, var(--tw-gradient-via-opacity));
 
via-yellow--tw-gradient-via: rgba(206, 207, 88, var(--tw-gradient-via-opacity));
 
via-orange-0--tw-gradient-via: rgba(255, 247, 244, var(--tw-gradient-via-opacity));
 
via-orange-100--tw-gradient-via: rgba(253, 208, 188, var(--tw-gradient-via-opacity));
 
via-orange-200--tw-gradient-via: rgba(246, 171, 133, var(--tw-gradient-via-opacity));
 
via-orange-300--tw-gradient-via: rgba(233, 140, 85, var(--tw-gradient-via-opacity));
 
via-orange-400--tw-gradient-via: rgba(214, 114, 47, var(--tw-gradient-via-opacity));
 
via-orange-500--tw-gradient-via: rgba(187, 91, 22, var(--tw-gradient-via-opacity));
 
via-orange-600--tw-gradient-via: rgba(155, 70, 6, var(--tw-gradient-via-opacity));
 
via-orange-700--tw-gradient-via: rgba(121, 53, 0, var(--tw-gradient-via-opacity));
 
via-orange-800--tw-gradient-via: rgba(85, 38, 0, var(--tw-gradient-via-opacity));
 
via-orange-900--tw-gradient-via: rgba(51, 23, 0, var(--tw-gradient-via-opacity));
 
via-orange--tw-gradient-via: rgba(233, 140, 85, 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(247, 144, 146, var(--tw-gradient-via-opacity));
 
via-red-300--tw-gradient-via: rgba(235, 100, 103, var(--tw-gradient-via-opacity));
 
via-red-400--tw-gradient-via: rgba(216, 65, 68, var(--tw-gradient-via-opacity));
 
via-red-500--tw-gradient-via: rgba(191, 39, 42, var(--tw-gradient-via-opacity));
 
via-red-600--tw-gradient-via: rgba(161, 22, 24, var(--tw-gradient-via-opacity));
 
via-red-700--tw-gradient-via: rgba(129, 11, 13, var(--tw-gradient-via-opacity));
 
via-red-800--tw-gradient-via: rgba(96, 5, 7, var(--tw-gradient-via-opacity));
 
via-red-900--tw-gradient-via: rgba(64, 2, 3, var(--tw-gradient-via-opacity));
 
via-red--tw-gradient-via: rgba(235, 100, 103, var(--tw-gradient-via-opacity));
 
via-pink-0--tw-gradient-via: rgba(255, 244, 255, var(--tw-gradient-via-opacity));
 
via-pink-100--tw-gradient-via: rgba(253, 194, 245, var(--tw-gradient-via-opacity));
 
via-pink-200--tw-gradient-via: rgba(247, 144, 219, var(--tw-gradient-via-opacity));
 
via-pink-300--tw-gradient-via: rgba(235, 100, 182, var(--tw-gradient-via-opacity));
 
via-pink-400--tw-gradient-via: rgba(216, 65, 144, var(--tw-gradient-via-opacity));
 
via-pink-500--tw-gradient-via: rgba(191, 39, 108, var(--tw-gradient-via-opacity));
 
via-pink-600--tw-gradient-via: rgba(161, 22, 78, var(--tw-gradient-via-opacity));
 
via-pink-700--tw-gradient-via: rgba(129, 11, 54, var(--tw-gradient-via-opacity));
 
via-pink-800--tw-gradient-via: rgba(96, 5, 37, var(--tw-gradient-via-opacity));
 
via-pink-900--tw-gradient-via: rgba(64, 2, 23, var(--tw-gradient-via-opacity));
 
via-pink--tw-gradient-via: rgba(235, 100, 182, var(--tw-gradient-via-opacity));
 
via-light--tw-gradient-via: rgba(253, 248, 255, var(--tw-gradient-via-opacity));
 
via-dark--tw-gradient-via: rgba(52, 46, 50, 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(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-via-opacity));
 
via-secondary-dark--tw-gradient-via: rgba(53, 0, 97, var(--tw-gradient-via-opacity));
 
via-info--tw-gradient-via: rgba(100, 160, 235, var(--tw-gradient-via-opacity));
 
via-info-light--tw-gradient-via: rgba(144, 201, 247, var(--tw-gradient-via-opacity));
 
via-info-dark--tw-gradient-via: rgba(65, 119, 216, var(--tw-gradient-via-opacity));
 
via-success--tw-gradient-via: rgba(87, 205, 113, var(--tw-gradient-via-opacity));
 
via-success-light--tw-gradient-via: rgba(135, 232, 145, var(--tw-gradient-via-opacity));
 
via-success-dark--tw-gradient-via: rgba(50, 168, 87, var(--tw-gradient-via-opacity));
 
via-warning--tw-gradient-via: rgba(206, 207, 88, var(--tw-gradient-via-opacity));
 
via-warning-light--tw-gradient-via: rgba(234, 227, 136, var(--tw-gradient-via-opacity));
 
via-warning-dark--tw-gradient-via: rgba(162, 169, 51, var(--tw-gradient-via-opacity));
 
via-danger--tw-gradient-via: rgba(235, 100, 103, var(--tw-gradient-via-opacity));
 
via-danger-light--tw-gradient-via: rgba(247, 144, 146, var(--tw-gradient-via-opacity));
 
via-danger-dark--tw-gradient-via: rgba(216, 65, 68, 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(37, 13, 46, 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(253, 248, 255, var(--tw-gradient-to-opacity));
 
to-gray-100--tw-gradient-to: rgba(248, 246, 249, var(--tw-gradient-to-opacity));
 
to-gray-200--tw-gradient-to: rgba(233, 231, 234, var(--tw-gradient-to-opacity));
 
to-gray-300--tw-gradient-to: rgba(207, 203, 206, var(--tw-gradient-to-opacity));
 
to-gray-400--tw-gradient-to: rgba(168, 163, 167, var(--tw-gradient-to-opacity));
 
to-gray-500--tw-gradient-to: rgba(123, 116, 121, var(--tw-gradient-to-opacity));
 
to-gray-600--tw-gradient-to: rgba(81, 75, 79, var(--tw-gradient-to-opacity));
 
to-gray-700--tw-gradient-to: rgba(52, 46, 50, var(--tw-gradient-to-opacity));
 
to-gray-800--tw-gradient-to: rgba(35, 30, 33, var(--tw-gradient-to-opacity));
 
to-gray-900--tw-gradient-to: rgba(26, 18, 23, var(--tw-gradient-to-opacity));
 
to-gray--tw-gradient-to: rgba(233, 231, 234, var(--tw-gradient-to-opacity));
 
to-violet-0--tw-gradient-to: rgba(246, 243, 255, var(--tw-gradient-to-opacity));
 
to-violet-100--tw-gradient-to: rgba(239, 228, 255, var(--tw-gradient-to-opacity));
 
to-violet-200--tw-gradient-to: rgba(220, 196, 255, var(--tw-gradient-to-opacity));
 
to-violet-300--tw-gradient-to: rgba(189, 144, 255, var(--tw-gradient-to-opacity));
 
to-violet-400--tw-gradient-to: rgba(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-to-opacity));
 
to-violet-800--tw-gradient-to: rgba(53, 0, 97, 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, 243, 255, var(--tw-gradient-to-opacity));
 
to-magenta-100--tw-gradient-to: rgba(247, 221, 255, var(--tw-gradient-to-opacity));
 
to-magenta-200--tw-gradient-to: rgba(239, 184, 253, var(--tw-gradient-to-opacity));
 
to-magenta-300--tw-gradient-to: rgba(229, 131, 247, var(--tw-gradient-to-opacity));
 
to-magenta-400--tw-gradient-to: rgba(213, 67, 237, 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(180, 0, 186, 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(99, 0, 86, var(--tw-gradient-to-opacity));
 
to-magenta-900--tw-gradient-to: rgba(51, 0, 41, 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(244, 253, 255, var(--tw-gradient-to-opacity));
 
to-blue-100--tw-gradient-to: rgba(194, 235, 253, var(--tw-gradient-to-opacity));
 
to-blue-200--tw-gradient-to: rgba(144, 201, 247, var(--tw-gradient-to-opacity));
 
to-blue-300--tw-gradient-to: rgba(100, 160, 235, var(--tw-gradient-to-opacity));
 
to-blue-400--tw-gradient-to: rgba(65, 119, 216, var(--tw-gradient-to-opacity));
 
to-blue-500--tw-gradient-to: rgba(39, 83, 191, var(--tw-gradient-to-opacity));
 
to-blue-600--tw-gradient-to: rgba(22, 55, 161, var(--tw-gradient-to-opacity));
 
to-blue-700--tw-gradient-to: rgba(11, 35, 129, var(--tw-gradient-to-opacity));
 
to-blue-800--tw-gradient-to: rgba(5, 21, 96, var(--tw-gradient-to-opacity));
 
to-blue-900--tw-gradient-to: rgba(2, 13, 64, var(--tw-gradient-to-opacity));
 
to-blue--tw-gradient-to: rgba(100, 160, 235, var(--tw-gradient-to-opacity));
 
to-teal-0--tw-gradient-to: rgba(244, 255, 252, var(--tw-gradient-to-opacity));
 
to-teal-100--tw-gradient-to: rgba(190, 248, 236, var(--tw-gradient-to-opacity));
 
to-teal-200--tw-gradient-to: rgba(135, 232, 220, var(--tw-gradient-to-opacity));
 
to-teal-300--tw-gradient-to: rgba(87, 205, 200, var(--tw-gradient-to-opacity));
 
to-teal-400--tw-gradient-to: rgba(50, 164, 168, var(--tw-gradient-to-opacity));
 
to-teal-500--tw-gradient-to: rgba(26, 119, 127, var(--tw-gradient-to-opacity));
 
to-teal-600--tw-gradient-to: rgba(12, 81, 90, var(--tw-gradient-to-opacity));
 
to-teal-700--tw-gradient-to: rgba(5, 54, 62, var(--tw-gradient-to-opacity));
 
to-teal-800--tw-gradient-to: rgba(2, 39, 45, var(--tw-gradient-to-opacity));
 
to-teal-900--tw-gradient-to: rgba(1, 32, 38, var(--tw-gradient-to-opacity));
 
to-teal--tw-gradient-to: rgba(87, 205, 200, var(--tw-gradient-to-opacity));
 
to-green-0--tw-gradient-to: rgba(246, 255, 244, var(--tw-gradient-to-opacity));
 
to-green-100--tw-gradient-to: rgba(192, 248, 190, var(--tw-gradient-to-opacity));
 
to-green-200--tw-gradient-to: rgba(135, 232, 145, var(--tw-gradient-to-opacity));
 
to-green-300--tw-gradient-to: rgba(87, 205, 113, var(--tw-gradient-to-opacity));
 
to-green-400--tw-gradient-to: rgba(50, 168, 87, var(--tw-gradient-to-opacity));
 
to-green-500--tw-gradient-to: rgba(26, 127, 64, var(--tw-gradient-to-opacity));
 
to-green-600--tw-gradient-to: rgba(12, 90, 45, var(--tw-gradient-to-opacity));
 
to-green-700--tw-gradient-to: rgba(5, 62, 32, var(--tw-gradient-to-opacity));
 
to-green-800--tw-gradient-to: rgba(2, 45, 23, var(--tw-gradient-to-opacity));
 
to-green-900--tw-gradient-to: rgba(1, 38, 20, var(--tw-gradient-to-opacity));
 
to-green--tw-gradient-to: rgba(87, 205, 113, var(--tw-gradient-to-opacity));
 
to-yellow-0--tw-gradient-to: rgba(255, 252, 244, var(--tw-gradient-to-opacity));
 
to-yellow-100--tw-gradient-to: rgba(249, 240, 191, var(--tw-gradient-to-opacity));
 
to-yellow-200--tw-gradient-to: rgba(234, 227, 136, var(--tw-gradient-to-opacity));
 
to-yellow-300--tw-gradient-to: rgba(206, 207, 88, var(--tw-gradient-to-opacity));
 
to-yellow-400--tw-gradient-to: rgba(162, 169, 51, var(--tw-gradient-to-opacity));
 
to-yellow-500--tw-gradient-to: rgba(114, 125, 25, var(--tw-gradient-to-opacity));
 
to-yellow-600--tw-gradient-to: rgba(74, 85, 11, var(--tw-gradient-to-opacity));
 
to-yellow-700--tw-gradient-to: rgba(48, 56, 5, var(--tw-gradient-to-opacity));
 
to-yellow-800--tw-gradient-to: rgba(33, 39, 2, var(--tw-gradient-to-opacity));
 
to-yellow-900--tw-gradient-to: rgba(27, 33, 1, var(--tw-gradient-to-opacity));
 
to-yellow--tw-gradient-to: rgba(206, 207, 88, var(--tw-gradient-to-opacity));
 
to-orange-0--tw-gradient-to: rgba(255, 247, 244, var(--tw-gradient-to-opacity));
 
to-orange-100--tw-gradient-to: rgba(253, 208, 188, var(--tw-gradient-to-opacity));
 
to-orange-200--tw-gradient-to: rgba(246, 171, 133, var(--tw-gradient-to-opacity));
 
to-orange-300--tw-gradient-to: rgba(233, 140, 85, var(--tw-gradient-to-opacity));
 
to-orange-400--tw-gradient-to: rgba(214, 114, 47, var(--tw-gradient-to-opacity));
 
to-orange-500--tw-gradient-to: rgba(187, 91, 22, var(--tw-gradient-to-opacity));
 
to-orange-600--tw-gradient-to: rgba(155, 70, 6, var(--tw-gradient-to-opacity));
 
to-orange-700--tw-gradient-to: rgba(121, 53, 0, var(--tw-gradient-to-opacity));
 
to-orange-800--tw-gradient-to: rgba(85, 38, 0, var(--tw-gradient-to-opacity));
 
to-orange-900--tw-gradient-to: rgba(51, 23, 0, var(--tw-gradient-to-opacity));
 
to-orange--tw-gradient-to: rgba(233, 140, 85, 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(247, 144, 146, var(--tw-gradient-to-opacity));
 
to-red-300--tw-gradient-to: rgba(235, 100, 103, var(--tw-gradient-to-opacity));
 
to-red-400--tw-gradient-to: rgba(216, 65, 68, var(--tw-gradient-to-opacity));
 
to-red-500--tw-gradient-to: rgba(191, 39, 42, var(--tw-gradient-to-opacity));
 
to-red-600--tw-gradient-to: rgba(161, 22, 24, var(--tw-gradient-to-opacity));
 
to-red-700--tw-gradient-to: rgba(129, 11, 13, var(--tw-gradient-to-opacity));
 
to-red-800--tw-gradient-to: rgba(96, 5, 7, var(--tw-gradient-to-opacity));
 
to-red-900--tw-gradient-to: rgba(64, 2, 3, var(--tw-gradient-to-opacity));
 
to-red--tw-gradient-to: rgba(235, 100, 103, var(--tw-gradient-to-opacity));
 
to-pink-0--tw-gradient-to: rgba(255, 244, 255, var(--tw-gradient-to-opacity));
 
to-pink-100--tw-gradient-to: rgba(253, 194, 245, var(--tw-gradient-to-opacity));
 
to-pink-200--tw-gradient-to: rgba(247, 144, 219, var(--tw-gradient-to-opacity));
 
to-pink-300--tw-gradient-to: rgba(235, 100, 182, var(--tw-gradient-to-opacity));
 
to-pink-400--tw-gradient-to: rgba(216, 65, 144, var(--tw-gradient-to-opacity));
 
to-pink-500--tw-gradient-to: rgba(191, 39, 108, var(--tw-gradient-to-opacity));
 
to-pink-600--tw-gradient-to: rgba(161, 22, 78, var(--tw-gradient-to-opacity));
 
to-pink-700--tw-gradient-to: rgba(129, 11, 54, var(--tw-gradient-to-opacity));
 
to-pink-800--tw-gradient-to: rgba(96, 5, 37, var(--tw-gradient-to-opacity));
 
to-pink-900--tw-gradient-to: rgba(64, 2, 23, var(--tw-gradient-to-opacity));
 
to-pink--tw-gradient-to: rgba(235, 100, 182, var(--tw-gradient-to-opacity));
 
to-light--tw-gradient-to: rgba(253, 248, 255, var(--tw-gradient-to-opacity));
 
to-dark--tw-gradient-to: rgba(52, 46, 50, 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(148, 78, 250, 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(73, 0, 143, var(--tw-gradient-to-opacity));
 
to-secondary-dark--tw-gradient-to: rgba(53, 0, 97, var(--tw-gradient-to-opacity));
 
to-info--tw-gradient-to: rgba(100, 160, 235, var(--tw-gradient-to-opacity));
 
to-info-light--tw-gradient-to: rgba(144, 201, 247, var(--tw-gradient-to-opacity));
 
to-info-dark--tw-gradient-to: rgba(65, 119, 216, var(--tw-gradient-to-opacity));
 
to-success--tw-gradient-to: rgba(87, 205, 113, var(--tw-gradient-to-opacity));
 
to-success-light--tw-gradient-to: rgba(135, 232, 145, var(--tw-gradient-to-opacity));
 
to-success-dark--tw-gradient-to: rgba(50, 168, 87, var(--tw-gradient-to-opacity));
 
to-warning--tw-gradient-to: rgba(206, 207, 88, var(--tw-gradient-to-opacity));
 
to-warning-light--tw-gradient-to: rgba(234, 227, 136, var(--tw-gradient-to-opacity));
 
to-warning-dark--tw-gradient-to: rgba(162, 169, 51, var(--tw-gradient-to-opacity));
 
to-danger--tw-gradient-to: rgba(235, 100, 103, var(--tw-gradient-to-opacity));
 
to-danger-light--tw-gradient-to: rgba(247, 144, 146, var(--tw-gradient-to-opacity));
 
to-danger-dark--tw-gradient-to: rgba(216, 65, 68, 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(37, 13, 46, 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>