a11y.skipToMainContent
1

CSS Glassmorphism Jeneratör

Donmuş camı görsel olarak görün - ayar bulanık, şeffaflık, dourasyon, sınır ve gölge, sonra üretime hazır CSS.

tool.glassmorphism.presets

tool.glassmorphism.backdrop
px
%
%
%
px
%

tool.glassmorphism.preview

tool.glassmorphism.glass

tool.glassmorphism.css

Was this tool helpful?
Send output to:
Advertisement

How to use Glassmorphism Generator

  1. Bir ışık veya karanlık arka damla seçin, sonra bulanık ve dourasyon miktarlarını ayarlayın.
  2. Bir dolgu rengi seçin ve opaklığını ayarlamak, böylece arka plan gösterir.
  3. Sınır opaklığı, köşe yarısı ve opsiyonel gölgeyi kart doğru olana kadar.
  4. Tüm kuralları kopyalamak için CSS'yi kopyalayın -webkit-backdrop-filter geri çekilme.

What is Cammorphism Jeneratör?

Glassmorphism, CSS backdrop-filter mülk üzerinde inşa edilen donated-cam UI etkisidir. Yarı zamanlı bir ebeveyn dolgusu arka plan şovunu sağlarken, backdrop-filter: bulanık() elementin arkasında oturur ve saturate() bu camlı ışık için renkleri artırır.

Bu jeneratör, renkli bir gradient üzerinden bir cam kartı tercih eder, böylece bulanıklık aslında görünür ve her iki backdrop-filter ve -webkit-back-filter düşüş, rgba geçmişi, ince bir translucent sınırı, sınır-radius ve bir yumuşak gölge.

Advertisement

FAQ

Cam etkisi neden düz bir renk gibi görünüyor?
backdrop-filter sadece elementin arkasında oturan içeriği bulanıklaştırıyor. Kartınızın arkasında renkli veya meşgul bir şey yoksa, bulanıkın çalışmak için hiçbir şey yoktur. Cam kartı bir görüntü veya etkisini görmek için canlı bir gradient yerleştirin.
-webkit-backdrop-filter hattına ihtiyacım var mı?
Evet, Safari için. WebKit tabanlı tarayıcılar, özellikle iOS'ta, hala -webkit-backdrop-filter ön ek gerektirir. Bu jeneratör standart mülk yanında otomatik olarak içerir.
Backdrop-filter yaygın olarak destekleniyor mu?
Chrome, Edge, Firefox ve Safari'nin tüm mevcut versiyonlarında çalışır. Çok eski tarayıcılar için, element sadece bulanık olmadan yarı zamanlı geçmişi gösterir, ki bu zarif bir şekilde.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Glassmorphism Generator on Wikipedia·Developer Tools on Wikipedia·Glassmorphism Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement