ارتباط با من

تولید گرادینت با CSS

بدون درگیری با کد نویسی، گرادینت‌های جذاب و حرفه‌ای، ساده و متحرک، و بسیار کاربردی تولید کن!

نوع گرادینت
زاویه 135°
رنگ‌ها و موقعیت

پانداگراف

این یک باکس متنی است که گرادینت روی پس‌زمینه آن نشسته؛ متن خوانا و کنتراست حفظ می‌شود.

پس‌زمینه صفحه

تصور کن این بخش، هدر یا کاور صفحه اصلی سایت توست.

کد CSS آماده 


      

        المان سفارشی: <div class="pg-gradient-box"></div>
      

    

  


  
  

    
گرادینت چیست و چطور از این ابزار استفاده کنم؟

    

      گرادینت (Gradient) یا گرادیان، گذار تدریجی بین دو یا چند رنگ است. مرورگرها بدون تصویر و فقط با CSS
      آن را می‌سازند؛ یعنی سبک، بی‌نهایت شارپ در هر رزولوشن و کاملاً قابل انیمیت. این ابزار به تو اجازه می‌دهد
      گرادینت خطی، شعاعی و مخروطی بسازی، رنگ‌ها و موقعیتشان را دقیق تنظیم کنی، انیمیشن اضافه کنی،
      یک گرادینت جداگانه برای حالت هاور تعریف کنی و در نهایت یک تکه CSS تمیز برای المان سفارشی خودت کپی کنی.
    


    
مراحل استفاده

    
    
      
  1. نوع گرادینت را انتخاب کن: خطی، شعاعی یا مخروطی.
    2. 
      
  2. اگر نوع خطی یا مخروطی است، زاویه را با اسلایدر تنظیم کن (۰ درجه رو به بالا، ۹۰ درجه رو به راست).
    3. 
      
  3. روی مربع رنگ هر ردیف بزن و رنگ را تغییر بده؛ با اسلایدر کنارش موقعیت رنگ (color stop) را جابه‌جا کن.
    4. 
      
  4. با دکمه «افزودن رنگ» تا ۶ رنگ اضافه کن. موقعیت‌ها به‌صورت خودکار بین رنگ‌ها پخش می‌شوند.
    5. 
      
  5. اگر گرادینت متحرک می‌خواهی، کلید «گرادینت متحرک» را روشن کن و مدت انیمیشن را تعیین کن.
    6. 
      
  6. برای تغییر رنگ هنگام عبور ماوس، کلید «گرادینت هاور» را روشن کن و رنگ‌های حالت هاور را تنظیم کن. کد خروجی به‌صورت خودکار قاعده :hover را اضافه می‌کند.
    7. 
      
  7. پیش‌نمایش را در سه حالت دکمه، باکس متن و پس‌زمینه صفحه ببین.
    8. 
      
  8. دکمه «کپی کد» را بزن و CSS را در سایتت قرار بده.
    9. 
    


    
جدول خواص CSS

    

      

        
          
ویژگیتوضیحنمونه

        
        
          
linear-gradient()گرادینت خطی در جهت یک زاویهlinear-gradient(135deg, #ff6b6b, #4ecdc4)

          
radial-gradient()گرادینت شعاعی از یک مرکزradial-gradient(circle at 50% 50%, #ff6b6b, #4ecdc4)

          
conic-gradient()گرادینت مخروطی حول یک نقطهconic-gradient(from 90deg, #ff6b6b, #4ecdc4)

          
degواحد زاویه؛ ۰ رو به بالا، ۹۰ رو به راست45deg

          
color stopترکیب رنگ و موقعیت درصدی#ff6b6b 0%

          
background-sizeبزرگ‌کردن تصویر پس‌زمینه برای حرکت دادن300% 300%

          
background-positionجابه‌جایی پس‌زمینه؛ قلب انیمیشن گرادینت100% 50%

          
animationاتصال کی‌فریم به المانpg-gradient-move 6s ease-in-out infinite

          
@keyframesتعریف مراحل انیمیشن@keyframes pg-gradient-move { … }

          
:hoverحالت عبور ماوس روی المان.pg-gradient-box:hover { background-image: … }

          
background-clipاعمال گرادینت روی خودِ متن-webkit-background-clip: text; color: transparent;

        
      

    


    
راهنمای استفاده در المنتور

    
    
      
  1. در صفحه‌ساز المنتور، یک ویجت HTML را داخل ستون یا کانتینر موردنظر بکش و کد این ابزار را داخلش پیست کن.
    2. 
      
  2. از ابزار، کد CSS را بساز و با دکمه «کپی کد» بردار.
    3. 
      
  3. روی المان هدف (کانتینر، دکمه، باکس) کلیک کن و در تب Advanced → CSS Classes کلاس pg-gradient-box را وارد کن.
    4. 
      
  4. برای اعمال CSS: اگر المنتور پرو داری از Advanced → Custom CSS همان المان استفاده کن؛ در غیر این صورت از نمایش → سفارشی‌سازی → CSS اضافی یا افزونه‌ای مثل Code Snippets استفاده کن.
    5. 
      
  5. اگر گرادینت متحرک است، حتماً بلوک @keyframes را هم همراه CSS کپی کن؛ بدون آن انیمیشن اجرا نمی‌شود.
    6. 
      
  6. برای حالت هاور، قاعده .pg-gradient-box:hover را هم کپی کن. اگر می‌خواهی تغییر رنگ نرم‌تر شود، از یک لایه شبه‌المان (::before) با opacity استفاده کن.
    7. 
    


    
سؤالات متداول


    

      چرا گرادینت متحرک در سایت من حرکت نمی‌کند؟
      
سه دلیل رایج: ۱) بلوک @keyframes کپی نشده یا نامش با نامی که در animation نوشته شده یکی نیست. ۲) افزونه‌های بهینه‌سازی CSS (مثل LiteSpeed یا WP Rocket) کی‌فریم‌های «استفاده‌نشده» را حذف می‌کنند؛ کی‌فریم را در همان فایل CSS قرار بده و کش را پاک کن. ۳) المان background-size نگرفته، پس فضایی برای جابه‌جایی وجود ندارد.

    


    

      تغییر رنگ در حالت هاور با پرش انجام می‌شود؛ چطور نرمش کنم؟
      
خودِ background-image در مرورگرها به‌صورت نرم transition نمی‌شود (مقدارش قابل درون‌یابی نیست). برای گذار نرم، دو راه داری: ۱) به‌جای عوض‌کردن background-image، از یک شبه‌المان (::before) با گرادینت دوم و opacity: 0 استفاده کن و در :hover مقدار opacity: 1 بده و روی opacity ترنزیشن بگذار. ۲) از دو لایه گرادینت روی هم استفاده کن و background-position یا opacity لایه بالایی را تغییر بده.

    


    

      چطور گرادینت را روی خودِ متن اعمال کنم؟
      
روی همان المان متنی این سه خط را بگذار: background-image: linear-gradient(...)، سپس -webkit-background-clip: text و background-clip: text و در آخر color: transparent. اگر مرورگر پشتیبانی نکند، متن نامرئی می‌شود؛ به همین دلیل بهتر است یک color جایگزین هم با @supports تعریف کنی.

    


    

      چرا در گرادینت مخروطی بین رنگ اول و آخر یک خط تیز دیده می‌شود؟
      
گرادینت مخروطی یک دور کامل ۳۶۰ درجه است و انتهای آن دقیقاً به ابتدایش می‌رسد. اگر رنگ آخر با رنگ اول یکی نباشد، یک لبه ایجاد می‌شود. این ابزار به‌صورت خودکار رنگ اول را در ۱۰۰٪ تکرار می‌کند تا اتصال نرم شود؛ اگر خودت کد را دستی می‌نویسی همین کار را بکن.

    


    

      گرادینت را روی دکمه المنتور چطور اعمال کنم؟
      
بهترین راه این است که روی ویجت دکمه یک کلاس مثل pg-gradient-box بدهی و CSS را در Custom CSS همان ویجت بگذاری. اگر با تنظیمات خودِ ویجت دکمه درگیر شد، از background-image: … !important; استفاده کن. برای حالت hover هم قاعده .pg-gradient-box:hover را جداگانه اضافه کن. توجه کن که تغییر گرادینت در حالت هاور با پرش انجام می‌شود؛ اگر گذار نرم می‌خواهی از تکنیک شبه‌المان + opacity استفاده کن.