இலவச மாற்றி
கிளாஸ்மார்பிசம் CSS ஜெனரேட்டர்
நிகழ்நேர முன்னோட்டத்துடன் அதிர்ச்சியூட்டும் கிளாஸ்மார்பிசம் அட்டை விளைவுகளை உருவாக்கவும். தெளிவின்மை, ஒளிபுகாநிலை மற்றும் வண்ணங்களை உடனடியாகத் தனிப்பயனாக்குங்கள்.
முன்னோட்டம்
Glassmorphism Card
Beautiful frosted glass effect with customizable settings.
Learn Moreபின்னணி நிறம்
#FFFFFF
பின்னணி ஒளிபுகாநிலை15%
0%50%100%
மங்கலான தொகை16px
0px20px40px
பார்டர் நிறம்
#FFFFFF
பார்டர் ஒளிபுகா20%
0%50%100%
எல்லை ஆரம்20px
0px30px60px
நிழல் தீவிரம்30%
0%40%80%
உருவாக்கப்பட்ட CSS
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
padding: 2rem;
}