இலவச மாற்றி

CSS சாய்வு ஜெனரேட்டர்

நேரடி முன்னோட்டத்துடன் CSS சாய்வுகளை காட்சிப்படுத்தவும். தனிப்பயன் வண்ண நிறுத்தங்களுடன் நேரியல், ரேடியல் மற்றும் கூம்பு சாய்வுகளை உருவாக்கவும் - இலவச மற்றும் கிளையன்ட் பக்கமாக.

நேரடி முன்னோட்டம்
CSS வெளியீடு
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
கோணம் (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

இந்த கருவி பற்றி

காட்சி எடிட்டருடன் அழகான CSS நேரியல் மற்றும் ரேடியல் சாய்வுகளை உருவாக்கவும். வண்ணங்களைத் தேர்ந்தெடுங்கள், நிறுத்தங்களைச் சரிசெய்தல், திசை அல்லது கோணத்தை மாற்றுதல் மற்றும் நேரடி முன்னோட்ட புதுப்பிப்பை உண்மையான நேரத்தில் பார்க்கலாம். உருவாக்கப்பட்ட CSS குறியீட்டை நகலெடுத்து — பழைய உலாவிகளுக்கான விற்பனையாளர் முன்னொட்டுகள் உட்பட — அதை நேரடியாக உங்கள் நடைதாளில் ஒட்டவும்.

பயன்படுத்துவது எப்படி

  1. சாய்வு வகையைத் தேர்வு செய்யவும்: நேரியல் அல்லது ரேடியல்.
  2. சாய்வு பட்டியைக் கிளிக் செய்து வண்ணங்களைத் தேர்ந்தெடுப்பதன் மூலம் வண்ண நிறுத்தங்களைச் சேர்க்கவும்.
  3. கட்டுப்பாடுகளைப் பயன்படுத்தி சாய்வு கோணம் (நேரியல்) அல்லது நிலையை (ரேடியல்) சரிசெய்யவும்.
  4. வெளியீடு பேனலில் இருந்து உருவாக்கப்பட்ட CSS குறியீட்டை நகலெடுக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

CSS சாய்வுகள் எல்லா உலாவிகளிலும் வேலை செய்யுமா?
Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட அனைத்து தற்போதைய உலாவிகளிலும் நவீன CSS சாய்வுகள் (லீனியர்-கிரேடியன்ட், ரேடியல்-கிரேடியன்ட்) ஆதரிக்கப்படுகின்றன. கருவியானது பழைய உலாவி பதிப்புகளுக்கு விருப்பமாக -webkit- முன்னொட்டுகளை உருவாக்கலாம்.
நான் பல வண்ண சாய்வுகளை உருவாக்க முடியுமா?
ஆம். உங்களுக்குத் தேவையான பல வண்ண நிறுத்தங்களைச் சேர்க்கவும். வண்ணங்கள் கலக்கும் இடத்தைக் கட்டுப்படுத்த ஒவ்வொரு நிறுத்தத்தின் நிலையையும் நீங்கள் சரிசெய்யலாம். இது சிக்கலான வானவில், சூரிய அஸ்தமனம் அல்லது தனிப்பயன் பிராண்ட் சாய்வுகளை அனுமதிக்கிறது.
நேரியல் மற்றும் ரேடியல் சாய்வுகளுக்கு என்ன வித்தியாசம்?
நேரியல் சாய்வுகள் ஒரு நேர் கோட்டில் (மேலிருந்து கீழாக, இடமிருந்து வலமாக, மூலைவிட்டம் அல்லது ஏதேனும் கோணம்) வண்ணங்களை மாற்றும். ரேடியல் சாய்வுகள் ஒரு வட்ட அல்லது நீள்வட்ட வடிவத்தில் ஒரு மையப் புள்ளியிலிருந்து வெளிப்புறமாக நிறங்களை மாற்றும்.
உரைக்கான பின்னணியாக சாய்வைப் பயன்படுத்தலாமா?
ஆம். பின்னணி-கிளிப்பைப் பயன்படுத்தவும்: -webkit-text-fill-color உடன் உரை: உரைக்கு சாய்வைப் பயன்படுத்த வெளிப்படையானது. உருவாக்கப்பட்ட CSS சாய்வு வரையறையை வழங்குகிறது - சாய்வு உரைக்கான இந்த பண்புகளுடன் அதை இணைக்கவும்.