طیف رنگی (Gradients)

ساخت گرادیانت خطی، شعاعی و مخروطی در CSS با چند رنگ و زاویه دلخواه

گرادیانت در CSS

گرادیانت ترکیب نرم دو یا چند رنگ است. CSS سه نوع گرادیانت پشتیبانی می‌کند.

انواع گرادیانت

نوعتوضیحنحوه
خطی (Linear)در یک خط مستقیمlinear-gradient()
شعاعی (Radial)از مرکز به بیرونradial-gradient()
مخروطی (Conic)دور一个 نقطهconic-gradient()

۱. Linear Gradient

/* پایه — از بالا به پایین */
    background: linear-gradient(red, blue);
    
    /* جهت — به راست */
    background: linear-gradient(to right, red, blue);
    
    /* زاویه */
    background: linear-gradient(45deg, red, blue);
    
    /* چند رنگ */
    background: linear-gradient(90deg, red, yellow, green);

۲. Radial Gradient

/* پایه */
    background: radial-gradient(circle, red, blue);
    
    /* موقعیت مرکز */
    background: radial-gradient(circle at top right, red, blue);
    
    /* سایز */
    background: radial-gradient(circle closest-side, red, blue);

۳. Conic Gradient

/* پایه */
    background: conic-gradient(red, yellow, green, red);
    
    /* از مرکز مشخص */
    background: conic-gradient(from 45deg at 50% 50%, red, blue);

کنترل رنگ‌ها

/* مکان توقف رنگ */
    background: linear-gradient(to right, red 0%, blue 50%, green 100%);
    
    /* رنگ تند */
    background: linear-gradient(to right, red 50%, blue 50%);

گرادیانت تکرارشونده

background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

گرادیانت متنی

.gradient-text {
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

گرادیانت محبوب

/* غروب */
    .sunset { background: linear-gradient(to right, #ff512f, #dd2476); }
    
    /* اقیانوس */
    .ocean { background: linear-gradient(to right, #2193b0, #6dd5ed); }
    
    /* شب */
    .night { background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط