Glassmorphism Oluşturucu

Yarı saydam bir arka plan rengi, isteğe bağlı kenarlık, yuvarlatılmış köşeler ve bulanıklık ile doygunluk içeren bir backdrop-filter birleştirerek bir glassmorphism kart stili üretin. Çıktı, sabit çok duraklı bir gradyan üzerinde canlı önizlenen beş bildirimin (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter) tam bir parçasıdır.

1. Background Color (Arka Plan Rengi) seçin ve Opacity (0–1, 0.05 adımlarla) kaydırıcısını sürükleyin — bunlar birlikte rgba() arka planını oluşturur. 2. Bir Border Color (Kenarlık Rengi) seçin ve Border Width (0–5px) ile Border Radius (0–50px) değerlerini ayarlayın. 3. backdrop-filter için Blur (1–30px) ve Saturation (100–200%) değerlerini ayarlayın. 4. Beş satırlık CSS parçasını kopyalamak için Copy'ye tıklayın.

Üretilen CSS her zaman beş satır içerir: background: rgba(r, g, b, opacity); border: {width}px solid {color}; border-radius: {radius}px; backdrop-filter: blur({blur}px) saturate({sat}%); ve Safari için karşılık gelen -webkit-backdrop-filter. background-color, hex seçicisinden kaydırıcının opacity değeriyle bir rgba() değerine dönüştürülür. Önizleme sabit beş duraklı bir gradyan kullanır ve değiştirilemez.