Effects
Box Shadow Color
Utilities for sets the shadow color to an element.
Class
| class | css | |
|---|---|---|
| shadow-md-charcoal-100 | box-shadow: 0 0 6px #222c35 | |
| shadow-lg-charcoal-100 | box-shadow: 0 0 15px #222c35 | |
| shadow-xl-charcoal-100 | box-shadow: 0 0 25px #222c35 | |
| shadow-2xl-charcoal-100 | box-shadow: 0 0 50px #222c35 | |
| shadow-md-charcoal-200 | box-shadow: 0 0 6px #1f2831 | |
| shadow-lg-charcoal-200 | box-shadow: 0 0 15px #1f2831 | |
| shadow-xl-charcoal-200 | box-shadow: 0 0 25px #1f2831 | |
| shadow-2xl-charcoal-200 | box-shadow: 0 0 50px #1f2831 | |
| shadow-md-charcoal-300 | box-shadow: 0 0 6px #1c252c | |
| shadow-lg-charcoal-300 | box-shadow: 0 0 15px #1c252c | |
| shadow-xl-charcoal-300 | box-shadow: 0 0 25px #1c252c | |
| shadow-2xl-charcoal-300 | box-shadow: 0 0 50px #1c252c | |
| shadow-md-charcoal-400 | box-shadow: 0 0 6px #192127 | |
| shadow-lg-charcoal-400 | box-shadow: 0 0 15px #192127 | |
| shadow-xl-charcoal-400 | box-shadow: 0 0 25px #192127 | |
| shadow-2xl-charcoal-400 | box-shadow: 0 0 50px #192127 | |
| shadow-md-charcoal-500 | box-shadow: 0 0 6px #161d22 | |
| shadow-lg-charcoal-500 | box-shadow: 0 0 15px #161d22 | |
| shadow-xl-charcoal-500 | box-shadow: 0 0 25px #161d22 | |
| shadow-2xl-charcoal-500 | box-shadow: 0 0 50px #161d22 | |
| shadow-md-charcoal-600 | box-shadow: 0 0 6px #13181d | |
| shadow-lg-charcoal-600 | box-shadow: 0 0 15px #13181d | |
| shadow-xl-charcoal-600 | box-shadow: 0 0 25px #13181d | |
| shadow-2xl-charcoal-600 | box-shadow: 0 0 50px #13181d | |
| shadow-md-charcoal-700 | box-shadow: 0 0 6px #101419 | |
| shadow-lg-charcoal-700 | box-shadow: 0 0 15px #101419 | |
| shadow-xl-charcoal-700 | box-shadow: 0 0 25px #101419 | |
| shadow-2xl-charcoal-700 | box-shadow: 0 0 50px #101419 | |
| shadow-md-charcoal-800 | box-shadow: 0 0 6px #0d1014 | |
| shadow-lg-charcoal-800 | box-shadow: 0 0 15px #0d1014 | |
| shadow-xl-charcoal-800 | box-shadow: 0 0 25px #0d1014 | |
| shadow-2xl-charcoal-800 | box-shadow: 0 0 50px #0d1014 | |
| shadow-md-charcoal-900 | box-shadow: 0 0 6px #0a0c0f | |
| shadow-lg-charcoal-900 | box-shadow: 0 0 15px #0a0c0f | |
| shadow-xl-charcoal-900 | box-shadow: 0 0 25px #0a0c0f | |
| shadow-2xl-charcoal-900 | box-shadow: 0 0 50px #0a0c0f | |
| shadow-md-gray-100 | box-shadow: 0 0 6px #f7fafc | |
| shadow-lg-gray-100 | box-shadow: 0 0 15px #f7fafc | |
| shadow-xl-gray-100 | box-shadow: 0 0 25px #f7fafc | |
| shadow-2xl-gray-100 | box-shadow: 0 0 50px #f7fafc | |
| shadow-md-gray-200 | box-shadow: 0 0 6px #edf2f7 | |
| shadow-lg-gray-200 | box-shadow: 0 0 15px #edf2f7 | |
| shadow-xl-gray-200 | box-shadow: 0 0 25px #edf2f7 | |
| shadow-2xl-gray-200 | box-shadow: 0 0 50px #edf2f7 | |
| shadow-md-gray-300 | box-shadow: 0 0 6px #e2e8f0 | |
| shadow-lg-gray-300 | box-shadow: 0 0 15px #e2e8f0 | |
| shadow-xl-gray-300 | box-shadow: 0 0 25px #e2e8f0 | |
| shadow-2xl-gray-300 | box-shadow: 0 0 50px #e2e8f0 | |
| shadow-md-gray-400 | box-shadow: 0 0 6px #cbd5e0 | |
| shadow-lg-gray-400 | box-shadow: 0 0 15px #cbd5e0 | |
| shadow-xl-gray-400 | box-shadow: 0 0 25px #cbd5e0 | |
| shadow-2xl-gray-400 | box-shadow: 0 0 50px #cbd5e0 | |
| shadow-md-gray-500 | box-shadow: 0 0 6px #a0aec0 | |
| shadow-lg-gray-500 | box-shadow: 0 0 15px #a0aec0 | |
| shadow-xl-gray-500 | box-shadow: 0 0 25px #a0aec0 | |
| shadow-2xl-gray-500 | box-shadow: 0 0 50px #a0aec0 | |
| shadow-md-gray-600 | box-shadow: 0 0 6px #718096 | |
| shadow-lg-gray-600 | box-shadow: 0 0 15px #718096 | |
| shadow-xl-gray-600 | box-shadow: 0 0 25px #718096 | |
| shadow-2xl-gray-600 | box-shadow: 0 0 50px #718096 | |
| shadow-md-gray-700 | box-shadow: 0 0 6px #4a5568 | |
| shadow-lg-gray-700 | box-shadow: 0 0 15px #4a5568 | |
| shadow-xl-gray-700 | box-shadow: 0 0 25px #4a5568 | |
| shadow-2xl-gray-700 | box-shadow: 0 0 50px #4a5568 | |
| shadow-md-gray-800 | box-shadow: 0 0 6px #2d3748 | |
| shadow-lg-gray-800 | box-shadow: 0 0 15px #2d3748 | |
| shadow-xl-gray-800 | box-shadow: 0 0 25px #2d3748 | |
| shadow-2xl-gray-800 | box-shadow: 0 0 50px #2d3748 | |
| shadow-md-gray-900 | box-shadow: 0 0 6px #1a202c | |
| shadow-lg-gray-900 | box-shadow: 0 0 15px #1a202c | |
| shadow-xl-gray-900 | box-shadow: 0 0 25px #1a202c | |
| shadow-2xl-gray-900 | box-shadow: 0 0 50px #1a202c | |
| shadow-md-red-100 | box-shadow: 0 0 6px #fff5f5 | |
| shadow-lg-red-100 | box-shadow: 0 0 15px #fff5f5 | |
| shadow-xl-red-100 | box-shadow: 0 0 25px #fff5f5 | |
| shadow-2xl-red-100 | box-shadow: 0 0 50px #fff5f5 | |
| shadow-md-red-200 | box-shadow: 0 0 6px #fed7d7 | |
| shadow-lg-red-200 | box-shadow: 0 0 15px #fed7d7 | |
| shadow-xl-red-200 | box-shadow: 0 0 25px #fed7d7 | |
| shadow-2xl-red-200 | box-shadow: 0 0 50px #fed7d7 | |
| shadow-md-red-300 | box-shadow: 0 0 6px #feb2b2 | |
| shadow-lg-red-300 | box-shadow: 0 0 15px #feb2b2 | |
| shadow-xl-red-300 | box-shadow: 0 0 25px #feb2b2 | |
| shadow-2xl-red-300 | box-shadow: 0 0 50px #feb2b2 | |
| shadow-md-red-400 | box-shadow: 0 0 6px #fc8181 | |
| shadow-lg-red-400 | box-shadow: 0 0 15px #fc8181 | |
| shadow-xl-red-400 | box-shadow: 0 0 25px #fc8181 | |
| shadow-2xl-red-400 | box-shadow: 0 0 50px #fc8181 | |
| shadow-md-red-500 | box-shadow: 0 0 6px #f56565 | |
| shadow-lg-red-500 | box-shadow: 0 0 15px #f56565 | |
| shadow-xl-red-500 | box-shadow: 0 0 25px #f56565 | |
| shadow-2xl-red-500 | box-shadow: 0 0 50px #f56565 | |
| shadow-md-red-600 | box-shadow: 0 0 6px #e53e3e | |
| shadow-lg-red-600 | box-shadow: 0 0 15px #e53e3e | |
| shadow-xl-red-600 | box-shadow: 0 0 25px #e53e3e | |
| shadow-2xl-red-600 | box-shadow: 0 0 50px #e53e3e | |
| shadow-md-red-700 | box-shadow: 0 0 6px #c53030 | |
| shadow-lg-red-700 | box-shadow: 0 0 15px #c53030 | |
| shadow-xl-red-700 | box-shadow: 0 0 25px #c53030 | |
| shadow-2xl-red-700 | box-shadow: 0 0 50px #c53030 | |
| shadow-md-red-800 | box-shadow: 0 0 6px #9b2c2c | |
| shadow-lg-red-800 | box-shadow: 0 0 15px #9b2c2c | |
| shadow-xl-red-800 | box-shadow: 0 0 25px #9b2c2c | |
| shadow-2xl-red-800 | box-shadow: 0 0 50px #9b2c2c | |
| shadow-md-red-900 | box-shadow: 0 0 6px #742a2a | |
| shadow-lg-red-900 | box-shadow: 0 0 15px #742a2a | |
| shadow-xl-red-900 | box-shadow: 0 0 25px #742a2a | |
| shadow-2xl-red-900 | box-shadow: 0 0 50px #742a2a | |
| shadow-md-orange-100 | box-shadow: 0 0 6px #fffaf0 | |
| shadow-lg-orange-100 | box-shadow: 0 0 15px #fffaf0 | |
| shadow-xl-orange-100 | box-shadow: 0 0 25px #fffaf0 | |
| shadow-2xl-orange-100 | box-shadow: 0 0 50px #fffaf0 | |
| shadow-md-orange-200 | box-shadow: 0 0 6px #feebc8 | |
| shadow-lg-orange-200 | box-shadow: 0 0 15px #feebc8 | |
| shadow-xl-orange-200 | box-shadow: 0 0 25px #feebc8 | |
| shadow-2xl-orange-200 | box-shadow: 0 0 50px #feebc8 | |
| shadow-md-orange-300 | box-shadow: 0 0 6px #fbd38d | |
| shadow-lg-orange-300 | box-shadow: 0 0 15px #fbd38d | |
| shadow-xl-orange-300 | box-shadow: 0 0 25px #fbd38d | |
| shadow-2xl-orange-300 | box-shadow: 0 0 50px #fbd38d | |
| shadow-md-orange-400 | box-shadow: 0 0 6px #f6ad55 | |
| shadow-lg-orange-400 | box-shadow: 0 0 15px #f6ad55 | |
| shadow-xl-orange-400 | box-shadow: 0 0 25px #f6ad55 | |
| shadow-2xl-orange-400 | box-shadow: 0 0 50px #f6ad55 | |
| shadow-md-orange-500 | box-shadow: 0 0 6px #ed8936 | |
| shadow-lg-orange-500 | box-shadow: 0 0 15px #ed8936 | |
| shadow-xl-orange-500 | box-shadow: 0 0 25px #ed8936 | |
| shadow-2xl-orange-500 | box-shadow: 0 0 50px #ed8936 | |
| shadow-md-orange-600 | box-shadow: 0 0 6px #dd6b20 | |
| shadow-lg-orange-600 | box-shadow: 0 0 15px #dd6b20 | |
| shadow-xl-orange-600 | box-shadow: 0 0 25px #dd6b20 | |
| shadow-2xl-orange-600 | box-shadow: 0 0 50px #dd6b20 | |
| shadow-md-orange-700 | box-shadow: 0 0 6px #c05621 | |
| shadow-lg-orange-700 | box-shadow: 0 0 15px #c05621 | |
| shadow-xl-orange-700 | box-shadow: 0 0 25px #c05621 | |
| shadow-2xl-orange-700 | box-shadow: 0 0 50px #c05621 | |
| shadow-md-orange-800 | box-shadow: 0 0 6px #9c4221 | |
| shadow-lg-orange-800 | box-shadow: 0 0 15px #9c4221 | |
| shadow-xl-orange-800 | box-shadow: 0 0 25px #9c4221 | |
| shadow-2xl-orange-800 | box-shadow: 0 0 50px #9c4221 | |
| shadow-md-orange-900 | box-shadow: 0 0 6px #7b341e | |
| shadow-lg-orange-900 | box-shadow: 0 0 15px #7b341e | |
| shadow-xl-orange-900 | box-shadow: 0 0 25px #7b341e | |
| shadow-2xl-orange-900 | box-shadow: 0 0 50px #7b341e | |
| shadow-md-green-100 | box-shadow: 0 0 6px #f0fff4 | |
| shadow-lg-green-100 | box-shadow: 0 0 15px #f0fff4 | |
| shadow-xl-green-100 | box-shadow: 0 0 25px #f0fff4 | |
| shadow-2xl-green-100 | box-shadow: 0 0 50px #f0fff4 | |
| shadow-md-green-200 | box-shadow: 0 0 6px #c6f6d5 | |
| shadow-lg-green-200 | box-shadow: 0 0 15px #c6f6d5 | |
| shadow-xl-green-200 | box-shadow: 0 0 25px #c6f6d5 | |
| shadow-2xl-green-200 | box-shadow: 0 0 50px #c6f6d5 | |
| shadow-md-green-300 | box-shadow: 0 0 6px #9ae6b4 | |
| shadow-lg-green-300 | box-shadow: 0 0 15px #9ae6b4 | |
| shadow-xl-green-300 | box-shadow: 0 0 25px #9ae6b4 | |
| shadow-2xl-green-300 | box-shadow: 0 0 50px #9ae6b4 | |
| shadow-md-green-400 | box-shadow: 0 0 6px #68d391 | |
| shadow-lg-green-400 | box-shadow: 0 0 15px #68d391 | |
| shadow-xl-green-400 | box-shadow: 0 0 25px #68d391 | |
| shadow-2xl-green-400 | box-shadow: 0 0 50px #68d391 | |
| shadow-md-green-500 | box-shadow: 0 0 6px #48bb78 | |
| shadow-lg-green-500 | box-shadow: 0 0 15px #48bb78 | |
| shadow-xl-green-500 | box-shadow: 0 0 25px #48bb78 | |
| shadow-2xl-green-500 | box-shadow: 0 0 50px #48bb78 | |
| shadow-md-green-600 | box-shadow: 0 0 6px #38a169 | |
| shadow-lg-green-600 | box-shadow: 0 0 15px #38a169 | |
| shadow-xl-green-600 | box-shadow: 0 0 25px #38a169 | |
| shadow-2xl-green-600 | box-shadow: 0 0 50px #38a169 | |
| shadow-md-green-700 | box-shadow: 0 0 6px #2f855a | |
| shadow-lg-green-700 | box-shadow: 0 0 15px #2f855a | |
| shadow-xl-green-700 | box-shadow: 0 0 25px #2f855a | |
| shadow-2xl-green-700 | box-shadow: 0 0 50px #2f855a | |
| shadow-md-green-800 | box-shadow: 0 0 6px #276749 | |
| shadow-lg-green-800 | box-shadow: 0 0 15px #276749 | |
| shadow-xl-green-800 | box-shadow: 0 0 25px #276749 | |
| shadow-2xl-green-800 | box-shadow: 0 0 50px #276749 | |
| shadow-md-green-900 | box-shadow: 0 0 6px #22543d | |
| shadow-lg-green-900 | box-shadow: 0 0 15px #22543d | |
| shadow-xl-green-900 | box-shadow: 0 0 25px #22543d | |
| shadow-2xl-green-900 | box-shadow: 0 0 50px #22543d | |
| shadow-md-teal-100 | box-shadow: 0 0 6px #e6fffa | |
| shadow-lg-teal-100 | box-shadow: 0 0 15px #e6fffa | |
| shadow-xl-teal-100 | box-shadow: 0 0 25px #e6fffa | |
| shadow-2xl-teal-100 | box-shadow: 0 0 50px #e6fffa | |
| shadow-md-teal-200 | box-shadow: 0 0 6px #b2f5ea | |
| shadow-lg-teal-200 | box-shadow: 0 0 15px #b2f5ea | |
| shadow-xl-teal-200 | box-shadow: 0 0 25px #b2f5ea | |
| shadow-2xl-teal-200 | box-shadow: 0 0 50px #b2f5ea | |
| shadow-md-teal-300 | box-shadow: 0 0 6px #81e6d9 | |
| shadow-lg-teal-300 | box-shadow: 0 0 15px #81e6d9 | |
| shadow-xl-teal-300 | box-shadow: 0 0 25px #81e6d9 | |
| shadow-2xl-teal-300 | box-shadow: 0 0 50px #81e6d9 | |
| shadow-md-teal-400 | box-shadow: 0 0 6px #4fd1c5 | |
| shadow-lg-teal-400 | box-shadow: 0 0 15px #4fd1c5 | |
| shadow-xl-teal-400 | box-shadow: 0 0 25px #4fd1c5 | |
| shadow-2xl-teal-400 | box-shadow: 0 0 50px #4fd1c5 | |
| shadow-md-teal-500 | box-shadow: 0 0 6px #38b2ac | |
| shadow-lg-teal-500 | box-shadow: 0 0 15px #38b2ac | |
| shadow-xl-teal-500 | box-shadow: 0 0 25px #38b2ac | |
| shadow-2xl-teal-500 | box-shadow: 0 0 50px #38b2ac | |
| shadow-md-teal-600 | box-shadow: 0 0 6px #319795 | |
| shadow-lg-teal-600 | box-shadow: 0 0 15px #319795 | |
| shadow-xl-teal-600 | box-shadow: 0 0 25px #319795 | |
| shadow-2xl-teal-600 | box-shadow: 0 0 50px #319795 | |
| shadow-md-teal-700 | box-shadow: 0 0 6px #2c7a7b | |
| shadow-lg-teal-700 | box-shadow: 0 0 15px #2c7a7b | |
| shadow-xl-teal-700 | box-shadow: 0 0 25px #2c7a7b | |
| shadow-2xl-teal-700 | box-shadow: 0 0 50px #2c7a7b | |
| shadow-md-teal-800 | box-shadow: 0 0 6px #285e61 | |
| shadow-lg-teal-800 | box-shadow: 0 0 15px #285e61 | |
| shadow-xl-teal-800 | box-shadow: 0 0 25px #285e61 | |
| shadow-2xl-teal-800 | box-shadow: 0 0 50px #285e61 | |
| shadow-md-teal-900 | box-shadow: 0 0 6px #234e52 | |
| shadow-lg-teal-900 | box-shadow: 0 0 15px #234e52 | |
| shadow-xl-teal-900 | box-shadow: 0 0 25px #234e52 | |
| shadow-2xl-teal-900 | box-shadow: 0 0 50px #234e52 | |
| shadow-md-blue-100 | box-shadow: 0 0 6px #ebf8ff | |
| shadow-lg-blue-100 | box-shadow: 0 0 15px #ebf8ff | |
| shadow-xl-blue-100 | box-shadow: 0 0 25px #ebf8ff | |
| shadow-2xl-blue-100 | box-shadow: 0 0 50px #ebf8ff | |
| shadow-md-blue-200 | box-shadow: 0 0 6px #bee3f8 | |
| shadow-lg-blue-200 | box-shadow: 0 0 15px #bee3f8 | |
| shadow-xl-blue-200 | box-shadow: 0 0 25px #bee3f8 | |
| shadow-2xl-blue-200 | box-shadow: 0 0 50px #bee3f8 | |
| shadow-md-blue-300 | box-shadow: 0 0 6px #90cdf4 | |
| shadow-lg-blue-300 | box-shadow: 0 0 15px #90cdf4 | |
| shadow-xl-blue-300 | box-shadow: 0 0 25px #90cdf4 | |
| shadow-2xl-blue-300 | box-shadow: 0 0 50px #90cdf4 | |
| shadow-md-blue-400 | box-shadow: 0 0 6px #63b3ed | |
| shadow-lg-blue-400 | box-shadow: 0 0 15px #63b3ed | |
| shadow-xl-blue-400 | box-shadow: 0 0 25px #63b3ed | |
| shadow-2xl-blue-400 | box-shadow: 0 0 50px #63b3ed | |
| shadow-md-blue-500 | box-shadow: 0 0 6px #4299e1 | |
| shadow-lg-blue-500 | box-shadow: 0 0 15px #4299e1 | |
| shadow-xl-blue-500 | box-shadow: 0 0 25px #4299e1 | |
| shadow-2xl-blue-500 | box-shadow: 0 0 50px #4299e1 | |
| shadow-md-blue-600 | box-shadow: 0 0 6px #3182ce | |
| shadow-lg-blue-600 | box-shadow: 0 0 15px #3182ce | |
| shadow-xl-blue-600 | box-shadow: 0 0 25px #3182ce | |
| shadow-2xl-blue-600 | box-shadow: 0 0 50px #3182ce | |
| shadow-md-blue-700 | box-shadow: 0 0 6px #2b6cb0 | |
| shadow-lg-blue-700 | box-shadow: 0 0 15px #2b6cb0 | |
| shadow-xl-blue-700 | box-shadow: 0 0 25px #2b6cb0 | |
| shadow-2xl-blue-700 | box-shadow: 0 0 50px #2b6cb0 | |
| shadow-md-blue-800 | box-shadow: 0 0 6px #2c5282 | |
| shadow-lg-blue-800 | box-shadow: 0 0 15px #2c5282 | |
| shadow-xl-blue-800 | box-shadow: 0 0 25px #2c5282 | |
| shadow-2xl-blue-800 | box-shadow: 0 0 50px #2c5282 | |
| shadow-md-blue-900 | box-shadow: 0 0 6px #2a4365 | |
| shadow-lg-blue-900 | box-shadow: 0 0 15px #2a4365 | |
| shadow-xl-blue-900 | box-shadow: 0 0 25px #2a4365 | |
| shadow-2xl-blue-900 | box-shadow: 0 0 50px #2a4365 | |
| shadow-md-indigo-100 | box-shadow: 0 0 6px #ebf4ff | |
| shadow-lg-indigo-100 | box-shadow: 0 0 15px #ebf4ff | |
| shadow-xl-indigo-100 | box-shadow: 0 0 25px #ebf4ff | |
| shadow-2xl-indigo-100 | box-shadow: 0 0 50px #ebf4ff | |
| shadow-md-indigo-200 | box-shadow: 0 0 6px #c3dafe | |
| shadow-lg-indigo-200 | box-shadow: 0 0 15px #c3dafe | |
| shadow-xl-indigo-200 | box-shadow: 0 0 25px #c3dafe | |
| shadow-2xl-indigo-200 | box-shadow: 0 0 50px #c3dafe | |
| shadow-md-indigo-300 | box-shadow: 0 0 6px #a3bffa | |
| shadow-lg-indigo-300 | box-shadow: 0 0 15px #a3bffa | |
| shadow-xl-indigo-300 | box-shadow: 0 0 25px #a3bffa | |
| shadow-2xl-indigo-300 | box-shadow: 0 0 50px #a3bffa | |
| shadow-md-indigo-400 | box-shadow: 0 0 6px #7f9cf5 | |
| shadow-lg-indigo-400 | box-shadow: 0 0 15px #7f9cf5 | |
| shadow-xl-indigo-400 | box-shadow: 0 0 25px #7f9cf5 | |
| shadow-2xl-indigo-400 | box-shadow: 0 0 50px #7f9cf5 | |
| shadow-md-indigo-500 | box-shadow: 0 0 6px #667eea | |
| shadow-lg-indigo-500 | box-shadow: 0 0 15px #667eea | |
| shadow-xl-indigo-500 | box-shadow: 0 0 25px #667eea | |
| shadow-2xl-indigo-500 | box-shadow: 0 0 50px #667eea | |
| shadow-md-indigo-600 | box-shadow: 0 0 6px #5a67d8 | |
| shadow-lg-indigo-600 | box-shadow: 0 0 15px #5a67d8 | |
| shadow-xl-indigo-600 | box-shadow: 0 0 25px #5a67d8 | |
| shadow-2xl-indigo-600 | box-shadow: 0 0 50px #5a67d8 | |
| shadow-md-indigo-700 | box-shadow: 0 0 6px #4c51bf | |
| shadow-lg-indigo-700 | box-shadow: 0 0 15px #4c51bf | |
| shadow-xl-indigo-700 | box-shadow: 0 0 25px #4c51bf | |
| shadow-2xl-indigo-700 | box-shadow: 0 0 50px #4c51bf | |
| shadow-md-indigo-800 | box-shadow: 0 0 6px #434190 | |
| shadow-lg-indigo-800 | box-shadow: 0 0 15px #434190 | |
| shadow-xl-indigo-800 | box-shadow: 0 0 25px #434190 | |
| shadow-2xl-indigo-800 | box-shadow: 0 0 50px #434190 | |
| shadow-md-indigo-900 | box-shadow: 0 0 6px #3c366b | |
| shadow-lg-indigo-900 | box-shadow: 0 0 15px #3c366b | |
| shadow-xl-indigo-900 | box-shadow: 0 0 25px #3c366b | |
| shadow-2xl-indigo-900 | box-shadow: 0 0 50px #3c366b | |
| shadow-md-purple-100 | box-shadow: 0 0 6px #faf5ff | |
| shadow-lg-purple-100 | box-shadow: 0 0 15px #faf5ff | |
| shadow-xl-purple-100 | box-shadow: 0 0 25px #faf5ff | |
| shadow-2xl-purple-100 | box-shadow: 0 0 50px #faf5ff | |
| shadow-md-purple-200 | box-shadow: 0 0 6px #e9d8fd | |
| shadow-lg-purple-200 | box-shadow: 0 0 15px #e9d8fd | |
| shadow-xl-purple-200 | box-shadow: 0 0 25px #e9d8fd | |
| shadow-2xl-purple-200 | box-shadow: 0 0 50px #e9d8fd | |
| shadow-md-purple-300 | box-shadow: 0 0 6px #d6bcfa | |
| shadow-lg-purple-300 | box-shadow: 0 0 15px #d6bcfa | |
| shadow-xl-purple-300 | box-shadow: 0 0 25px #d6bcfa | |
| shadow-2xl-purple-300 | box-shadow: 0 0 50px #d6bcfa | |
| shadow-md-purple-400 | box-shadow: 0 0 6px #b794f4 | |
| shadow-lg-purple-400 | box-shadow: 0 0 15px #b794f4 | |
| shadow-xl-purple-400 | box-shadow: 0 0 25px #b794f4 | |
| shadow-2xl-purple-400 | box-shadow: 0 0 50px #b794f4 | |
| shadow-md-purple-500 | box-shadow: 0 0 6px #9f7aea | |
| shadow-lg-purple-500 | box-shadow: 0 0 15px #9f7aea | |
| shadow-xl-purple-500 | box-shadow: 0 0 25px #9f7aea | |
| shadow-2xl-purple-500 | box-shadow: 0 0 50px #9f7aea | |
| shadow-md-purple-600 | box-shadow: 0 0 6px #805ad5 | |
| shadow-lg-purple-600 | box-shadow: 0 0 15px #805ad5 | |
| shadow-xl-purple-600 | box-shadow: 0 0 25px #805ad5 | |
| shadow-2xl-purple-600 | box-shadow: 0 0 50px #805ad5 | |
| shadow-md-purple-700 | box-shadow: 0 0 6px #6b46c1 | |
| shadow-lg-purple-700 | box-shadow: 0 0 15px #6b46c1 | |
| shadow-xl-purple-700 | box-shadow: 0 0 25px #6b46c1 | |
| shadow-2xl-purple-700 | box-shadow: 0 0 50px #6b46c1 | |
| shadow-md-purple-800 | box-shadow: 0 0 6px #553c9a | |
| shadow-lg-purple-800 | box-shadow: 0 0 15px #553c9a | |
| shadow-xl-purple-800 | box-shadow: 0 0 25px #553c9a | |
| shadow-2xl-purple-800 | box-shadow: 0 0 50px #553c9a | |
| shadow-md-purple-900 | box-shadow: 0 0 6px #44337a | |
| shadow-lg-purple-900 | box-shadow: 0 0 15px #44337a | |
| shadow-xl-purple-900 | box-shadow: 0 0 25px #44337a | |
| shadow-2xl-purple-900 | box-shadow: 0 0 50px #44337a | |
| shadow-md-pink-100 | box-shadow: 0 0 6px #fff5f7 | |
| shadow-lg-pink-100 | box-shadow: 0 0 15px #fff5f7 | |
| shadow-xl-pink-100 | box-shadow: 0 0 25px #fff5f7 | |
| shadow-2xl-pink-100 | box-shadow: 0 0 50px #fff5f7 | |
| shadow-md-pink-200 | box-shadow: 0 0 6px #fed7e2 | |
| shadow-lg-pink-200 | box-shadow: 0 0 15px #fed7e2 | |
| shadow-xl-pink-200 | box-shadow: 0 0 25px #fed7e2 | |
| shadow-2xl-pink-200 | box-shadow: 0 0 50px #fed7e2 | |
| shadow-md-pink-300 | box-shadow: 0 0 6px #fbb6ce | |
| shadow-lg-pink-300 | box-shadow: 0 0 15px #fbb6ce | |
| shadow-xl-pink-300 | box-shadow: 0 0 25px #fbb6ce | |
| shadow-2xl-pink-300 | box-shadow: 0 0 50px #fbb6ce | |
| shadow-md-pink-400 | box-shadow: 0 0 6px #f687b3 | |
| shadow-lg-pink-400 | box-shadow: 0 0 15px #f687b3 | |
| shadow-xl-pink-400 | box-shadow: 0 0 25px #f687b3 | |
| shadow-2xl-pink-400 | box-shadow: 0 0 50px #f687b3 | |
| shadow-md-pink-500 | box-shadow: 0 0 6px #ed64a6 | |
| shadow-lg-pink-500 | box-shadow: 0 0 15px #ed64a6 | |
| shadow-xl-pink-500 | box-shadow: 0 0 25px #ed64a6 | |
| shadow-2xl-pink-500 | box-shadow: 0 0 50px #ed64a6 | |
| shadow-md-pink-600 | box-shadow: 0 0 6px #d53f8c | |
| shadow-lg-pink-600 | box-shadow: 0 0 15px #d53f8c | |
| shadow-xl-pink-600 | box-shadow: 0 0 25px #d53f8c | |
| shadow-2xl-pink-600 | box-shadow: 0 0 50px #d53f8c | |
| shadow-md-pink-700 | box-shadow: 0 0 6px #b83280 | |
| shadow-lg-pink-700 | box-shadow: 0 0 15px #b83280 | |
| shadow-xl-pink-700 | box-shadow: 0 0 25px #b83280 | |
| shadow-2xl-pink-700 | box-shadow: 0 0 50px #b83280 | |
| shadow-md-pink-800 | box-shadow: 0 0 6px #97266d | |
| shadow-lg-pink-800 | box-shadow: 0 0 15px #97266d | |
| shadow-xl-pink-800 | box-shadow: 0 0 25px #97266d | |
| shadow-2xl-pink-800 | box-shadow: 0 0 50px #97266d | |
| shadow-md-pink-900 | box-shadow: 0 0 6px #702459 | |
| shadow-lg-pink-900 | box-shadow: 0 0 15px #702459 | |
| shadow-xl-pink-900 | box-shadow: 0 0 25px #702459 | |
| shadow-2xl-pink-900 | box-shadow: 0 0 50px #702459 |
Usage
<!-- Example -->
<y class="shadow-lg-red-400 ... bg-white h-32 w-32"></y>v1.1.0 Set auto dark theme enabled to an element with added (dark) prefix.
<!-- Example -->
<y class="shadow-lg-red-400 ... (dark)shadow-lg-red-100 ... bg-white h-32 w-32">
...
</y>Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | Yes | |
| hover | ||
| group-hover | ||
| focus | ||
| focus-within | Yes | |
| active | ||
| visited | ||
| checked | ||
| disabled |
