Background image

Utilities for controlling an element's background image


Class reference

ClassProperties
bg-nonebackground-image: none
 
bg-gradient-to-tbackground-image: linear-gradient(to top, var(--tw-gradient-stops))
 
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--tw-gradient-stops))
 
bg-gradient-to-rbackground-image: linear-gradient(to right, var(--tw-gradient-stops))
 
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
 
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--tw-gradient-stops))
 
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--tw-gradient-stops))
 
bg-gradient-to-lbackground-image: linear-gradient(to left, var(--tw-gradient-stops))
 
bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--tw-gradient-stops))
 
bg-transparent-imagebackground-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%,...
 
bg-stripesbackground-image: linear-gradient(45deg,currentColor 12.5%,transparent 12.5%,transparent...
 
bg-gradientbackground-image: linear-gradient(var(--tw-gradient-direction), var(--tw-gradient-stops))
 
bg-gradient-to-0background-image: linear-gradient(0, var(--tw-gradient-stops))
 
bg-gradient-to-45background-image: linear-gradient(45deg, var(--tw-gradient-stops))
 
bg-gradient-to-90background-image: linear-gradient(90deg, var(--tw-gradient-stops))
 
bg-gradient-to-135background-image: linear-gradient(135deg, var(--tw-gradient-stops))
 
bg-gradient-to-180background-image: linear-gradient(180deg, var(--tw-gradient-stops))
 
bg-gradient-to-270background-image: linear-gradient(270deg, var(--tw-gradient-stops))
 
-bg-gradient-to-180background-image: linear-gradient(-180deg, var(--tw-gradient-stops))
 
-bg-gradient-to-90background-image: linear-gradient(-90deg, var(--tw-gradient-stops))
 
-bg-gradient-to-45background-image: linear-gradient(-45deg, var(--tw-gradient-stops))
 
bg-circle-transparentbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23transparent'...
 
bg-circle-blackbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000'...
 
bg-circle-whitebackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FFF'...
 
bg-circle-gray-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FDF8FF'...
 
bg-circle-gray-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F8F6F9'...
 
bg-circle-gray-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23E9E7EA'...
 
bg-circle-gray-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23CFCBCE'...
 
bg-circle-gray-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23A8A3A7'...
 
bg-circle-gray-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%237B7479'...
 
bg-circle-gray-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23514B4F'...
 
bg-circle-gray-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23342E32'...
 
bg-circle-gray-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23231E21'...
 
bg-circle-gray-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1217'...
 
bg-circle-graybackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23E9E7EA'...
 
bg-circle-violet-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F6F3FF'...
 
bg-circle-violet-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EFE4FF'...
 
bg-circle-violet-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23DCC4FF'...
 
bg-circle-violet-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BD90FF'...
 
bg-circle-violet-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23944EFA'...
 
bg-circle-violet-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23680CE9'...
 
bg-circle-violet-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%235900BE'...
 
bg-circle-violet-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2349008F'...
 
bg-circle-violet-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23350061'...
 
bg-circle-violet-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231E0033'...
 
bg-circle-violetbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23680CE9'...
 
bg-circle-magenta-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FBF3FF'...
 
bg-circle-magenta-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F7DDFF'...
 
bg-circle-magenta-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EFB8FD'...
 
bg-circle-magenta-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23E583F7'...
 
bg-circle-magenta-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23D543ED'...
 
bg-circle-magenta-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BF04DC'...
 
bg-circle-magenta-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23B400BA'...
 
bg-circle-magenta-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2392008A'...
 
bg-circle-magenta-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23630056'...
 
bg-circle-magenta-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23330029'...
 
bg-circle-magentabackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BF04DC'...
 
bg-circle-blue-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F4FDFF'...
 
bg-circle-blue-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23C2EBFD'...
 
bg-circle-blue-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2390C9F7'...
 
bg-circle-blue-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2364A0EB'...
 
bg-circle-blue-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%234177D8'...
 
bg-circle-blue-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%232753BF'...
 
bg-circle-blue-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231637A1'...
 
bg-circle-blue-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230B2381'...
 
bg-circle-blue-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23051560'...
 
bg-circle-blue-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23020D40'...
 
bg-circle-bluebackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2364A0EB'...
 
bg-circle-teal-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F4FFFC'...
 
bg-circle-teal-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BEF8EC'...
 
bg-circle-teal-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2387E8DC'...
 
bg-circle-teal-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2357CDC8'...
 
bg-circle-teal-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2332A4A8'...
 
bg-circle-teal-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A777F'...
 
bg-circle-teal-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230C515A'...
 
bg-circle-teal-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2305363E'...
 
bg-circle-teal-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2302272D'...
 
bg-circle-teal-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23012026'...
 
bg-circle-tealbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2357CDC8'...
 
bg-circle-green-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F6FFF4'...
 
bg-circle-green-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23C0F8BE'...
 
bg-circle-green-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2387E891'...
 
bg-circle-green-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2357CD71'...
 
bg-circle-green-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2332A857'...
 
bg-circle-green-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A7F40'...
 
bg-circle-green-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230C5A2D'...
 
bg-circle-green-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23053E20'...
 
bg-circle-green-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23022D17'...
 
bg-circle-green-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23012614'...
 
bg-circle-greenbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2357CD71'...
 
bg-circle-yellow-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FFFCF4'...
 
bg-circle-yellow-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F9F0BF'...
 
bg-circle-yellow-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EAE388'...
 
bg-circle-yellow-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23CECF58'...
 
bg-circle-yellow-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23A2A933'...
 
bg-circle-yellow-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23727D19'...
 
bg-circle-yellow-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%234A550B'...
 
bg-circle-yellow-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23303805'...
 
bg-circle-yellow-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23212702'...
 
bg-circle-yellow-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231B2101'...
 
bg-circle-yellowbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23CECF58'...
 
bg-circle-orange-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FFF7F4'...
 
bg-circle-orange-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FDD0BC'...
 
bg-circle-orange-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F6AB85'...
 
bg-circle-orange-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23E98C55'...
 
bg-circle-orange-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23D6722F'...
 
bg-circle-orange-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BB5B16'...
 
bg-circle-orange-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%239B4606'...
 
bg-circle-orange-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23793500'...
 
bg-circle-orange-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23552600'...
 
bg-circle-orange-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23331700'...
 
bg-circle-orangebackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23E98C55'...
 
bg-circle-red-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FFF4F4'...
 
bg-circle-red-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FDC2C4'...
 
bg-circle-red-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F79092'...
 
bg-circle-red-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EB6467'...
 
bg-circle-red-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23D84144'...
 
bg-circle-red-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BF272A'...
 
bg-circle-red-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23A11618'...
 
bg-circle-red-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23810B0D'...
 
bg-circle-red-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23600507'...
 
bg-circle-red-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23400203'...
 
bg-circle-redbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EB6467'...
 
bg-circle-pink-0background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FFF4FF'...
 
bg-circle-pink-100background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FDC2F5'...
 
bg-circle-pink-200background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F790DB'...
 
bg-circle-pink-300background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EB64B6'...
 
bg-circle-pink-400background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23D84190'...
 
bg-circle-pink-500background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BF276C'...
 
bg-circle-pink-600background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23A1164E'...
 
bg-circle-pink-700background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23810B36'...
 
bg-circle-pink-800background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23600525'...
 
bg-circle-pink-900background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23400217'...
 
bg-circle-pinkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EB64B6'...
 
bg-circle-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23FDF8FF'...
 
bg-circle-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23342E32'...
 
bg-circle-primarybackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23680CE9'...
 
bg-circle-primary-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23944EFA'...
 
bg-circle-primary-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%235900BE'...
 
bg-circle-secondarybackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231E0033'...
 
bg-circle-secondary-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2349008F'...
 
bg-circle-secondary-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23350061'...
 
bg-circle-infobackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2364A0EB'...
 
bg-circle-info-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2390C9F7'...
 
bg-circle-info-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%234177D8'...
 
bg-circle-successbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2357CD71'...
 
bg-circle-success-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2387E891'...
 
bg-circle-success-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2332A857'...
 
bg-circle-warningbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23CECF58'...
 
bg-circle-warning-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EAE388'...
 
bg-circle-warning-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23A2A933'...
 
bg-circle-dangerbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23EB6467'...
 
bg-circle-danger-lightbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F79092'...
 
bg-circle-danger-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23D84144'...
 
bg-circle-brand-primarybackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23680CE9'...
 
bg-circle-brand-accentbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23BF04DC'...
 
bg-circle-brand-secondarybackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231E0033'...
 
bg-circle-brand-darkbackground-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23250D2E'...
 
bg-check-transparentbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blackbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-whitebackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-gray-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-graybackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violet-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-violetbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magenta-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-magentabackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-blue-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-bluebackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-teal-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-tealbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-green-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-greenbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellow-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-yellowbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orange-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-orangebackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-red-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-redbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-0background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-100background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-200background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-300background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-400background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-500background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-600background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-700background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-800background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pink-900background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-pinkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-primarybackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-primary-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-primary-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-secondarybackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-secondary-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-secondary-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-infobackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-info-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-info-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-successbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-success-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-success-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-warningbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-warning-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-warning-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-dangerbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-danger-lightbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-danger-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-brand-primarybackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-brand-accentbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-brand-secondarybackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 
bg-check-brand-darkbackground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24...
 

# Linear gradients

To give an element a linear gradient background, use one of the bg-gradient-{direction} utilities, in combination with the gradient color stop utilities.

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

# Stop opacity

Adjust the opacity of each color stop by using the gradient stop opacity utilities.

<div class="h-24 rounded bg-gradient-to-90 from-orange-300 via-red-400 via-opacity-25 to-pink-500"></div>

# Stop position

Control the position of each stop by using the gradient stop position utilities.

<div class="bg-gradient-to-90 from-orange-300 via-red-400 via-stop-15 to-pink-500 to-stop-30"></div>

# Background Images

Use background image classes along side background position, size, repeat, clip etc for fine grained control over your backgrounds. You can even use blend-modes to create complex layered effects.

# Transparent Image

Setting a text color using .text-* will change the background image color.

<div class="text-blue-200 bg-transparent-image"></div>

# Stripes

Setting a text color using .text-* will change the background image color.

<div class="text-blue-200 bg-stripes"></div>

# Circles

This background image uses CSS Masks, setting the Background Color using the .bg-* will change the background image color.

<div class="bg-pink-300 bg-circles"></div>

# Waves

This background image uses CSS Masks, setting the Background Color using the .bg-* will change the background image color.

<div class="bg-orange-400 bg-waves"></div>

# Responsive

To control the background image of an element at a specific breakpoint, add a {screen}: prefix to any existing background image utility. For example, use md:bg-gradient-to-r to apply the bg-gradient-to-r utility at only medium screen sizes and above.

<div class="bg-gradient-to-r md:bg-gradient-to-t ..."></div>

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