BenoService

آکادمی بنو/آموزش CSS

Gradientها در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

در طراحی رابط کاربری مدرن، استفاده از رنگ فقط به انتخاب یک رنگ ثابت برای پس‌زمینه یا متن محدود نمی‌شود. بسیاری از وب‌سایت‌های حرفه‌ای برای ایجاد عمق بصری، جذابیت بیشتر و انتقال بهتر تمرکز کاربر از Gradient یا گرادیان استفاده می‌کنند.

گرادیان در CSS به ما اجازه می‌دهد بدون استفاده از یک فایل تصویری، انتقال تدریجی بین دو یا چند رنگ ایجاد کنیم. به همین دلیل می‌توان از آن برای طراحی پس‌زمینه Hero، دکمه‌ها، کارت‌ها، Borderها، Overlay روی تصاویر، متن‌های رنگی و حتی المان‌های تزئینی استفاده کرد.

در CSS سه نوع اصلی Gradient داریم:

  • linear-gradient()

  • radial-gradient()

  • conic-gradient()

همچنین نسخه‌های تکرارشونده آن‌ها نیز وجود دارند:

  • repeating-linear-gradient()

  • repeating-radial-gradient()

  • repeating-conic-gradient()

گرادیان‌ها از نظر CSS یک نوع <image> محسوب می‌شوند و معمولاً در background یا background-image استفاده می‌شوند.

Gradient چیست؟

Gradient در CSS یعنی ایجاد یک انتقال تدریجی بین رنگ‌ها.

برای مثال:

.box {
    background: linear-gradient(blue, purple);
}

در این مثال، مرورگر یک انتقال تدریجی از آبی به بنفش ایجاد می‌کند.

نکته مهم این است که Gradient یک تصویر واقعی نیست؛ مرورگر آن را بر اساس دستور CSS تولید می‌کند. بنابراین می‌توانیم اندازه، جهت و رنگ‌های آن را بدون نیاز به ساخت فایل تصویری جداگانه تغییر دهیم.

Linear Gradient

اولین و پرکاربردترین نوع Gradient، Linear Gradient است.

در این نوع، رنگ‌ها در امتداد یک خط تغییر می‌کنند.

ساختار کلی:

linear-gradient(direction, color1, color2, ...);

مثال ساده:

.box {
    background: linear-gradient(red, blue);
}

به صورت پیش‌فرض، این گرادیان از بالا به پایین حرکت می‌کند.

تغییر جهت Linear Gradient

می‌توانیم جهت Gradient را مشخص کنیم.

از چپ به راست

.box {
    background: linear-gradient(to right, red, blue);
}

در این حالت رنگ اول در سمت چپ و رنگ دوم در سمت راست قرار می‌گیرد.

از راست به چپ

.box {
    background: linear-gradient(to left, red, blue);
}

از بالا به پایین

.box {
    background: linear-gradient(to bottom, red, blue);
}

از پایین به بالا

.box {
    background: linear-gradient(to top, red, blue);
}

به صورت مورب

.box {
    background: linear-gradient(to bottom right, red, blue);
}

این روش برای طراحی Hero و کارت‌های مدرن بسیار کاربردی است.

استفاده از زاویه

به جای عبارت‌هایی مانند to right می‌توانیم زاویه مشخص کنیم.

.box {
    background: linear-gradient(45deg, red, blue);
}

برای مثال:

.box {
    background: linear-gradient(135deg, #ff7a00, #ff006e);
}

استفاده از زاویه کنترل بیشتری روی جهت Gradient به ما می‌دهد.

در CSS، زاویه 90deg گرادیان را به صورت افقی از چپ به راست ایجاد می‌کند و زاویه‌ها در جهت ساعتگرد افزایش پیدا می‌کنند.

چند رنگ در یک Gradient

محدود به دو رنگ نیستیم.

می‌توانیم چندین رنگ داشته باشیم:

.box {
    background: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue
    );
}

یا یک ترکیب مدرن‌تر:

.box {
    background: linear-gradient(
        135deg,
        #ff7a00,
        #ff3d81,
        #7c3aed
    );
}

استفاده از دو یا سه رنگ هماهنگ معمولاً نتیجه حرفه‌ای‌تری نسبت به استفاده از تعداد زیادی رنگ ایجاد می‌کند.

Color Stop چیست؟

هر رنگ در Gradient یک Color Stop محسوب می‌شود.

برای مثال:

background: linear-gradient(
    to right,
    red 0%,
    yellow 50%,
    blue 100%
);

در این مثال:

  • قرمز در 0%

  • زرد در 50%

  • آبی در 100%

قرار دارد.

می‌توانیم محل هر رنگ را کنترل کنیم:

background: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 30%,
    #0000ff 70%,
    #0000ff 100%
);

ایجاد مرز سخت بین رنگ‌ها

اگر محل شروع و پایان دو رنگ را یکسان کنیم، انتقال نرم از بین می‌رود.

مثلاً:

.box {
    background: linear-gradient(
        to right,
        #ff0000 50%,
        #0000ff 50%
    );
}

نتیجه یک نیمه قرمز و یک نیمه آبی خواهد بود.

این تکنیک برای ساخت برخی الگوهای CSS بسیار مفید است.

Radial Gradient

نوع دوم، Radial Gradient است.

در Linear Gradient رنگ‌ها در امتداد یک خط حرکت می‌کنند، اما در Radial Gradient رنگ‌ها از یک نقطه مرکزی به سمت بیرون گسترش پیدا می‌کنند. این Gradient می‌تواند به شکل دایره یا بیضی باشد.

مثال:

.box {
    background: radial-gradient(red, blue);
}

ایجاد دایره

می‌توانیم شکل Gradient را مشخص کنیم:

.box {
    background: radial-gradient(
        circle,
        red,
        blue
    );
}

ایجاد بیضی

.box {
    background: radial-gradient(
        ellipse,
        red,
        blue
    );
}

به صورت پیش‌فرض، Radial Gradient می‌تواند متناسب با نسبت ابعاد عنصر به شکل بیضی نمایش داده شود.

تعیین محل مرکز Gradient

می‌توانیم محل شروع Gradient را تغییر دهیم.

.box {
    background: radial-gradient(
        circle at top left,
        red,
        blue
    );
}

یا:

.box {
    background: radial-gradient(
        circle at center,
        red,
        blue
    );
}

یا:

.box {
    background: radial-gradient(
        circle at 80% 20%,
        red,
        blue
    );
}

این تکنیک برای ایجاد نورهای تزئینی در گوشه‌های یک صفحه بسیار کاربردی است.

ساخت افکت نور با Radial Gradient

یکی از کاربردهای جذاب Radial Gradient، ساخت نور مصنوعی بدون تصویر است.

.hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 120, 0, 0.35),
            transparent 35%
        ),
        #111827;
}

در اینجا یک نور نارنجی در قسمت بالای سمت راست Hero ایجاد می‌کنیم.

می‌توانیم چند نور داشته باشیم:

.hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 120, 0, 0.3),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(124, 58, 237, 0.25),
            transparent 35%
        ),
        #111827;
}

این روش در طراحی‌های Dark Mode و رابط‌های کاربری مدرن بسیار کاربردی است.

Conic Gradient

نوع سوم Conic Gradient است.

در این نوع، تغییر رنگ به صورت چرخشی حول یک نقطه مرکزی اتفاق می‌افتد؛ برخلاف Radial Gradient که از مرکز به بیرون حرکت می‌کند.

مثال:

.box {
    background: conic-gradient(
        red,
        yellow,
        green,
        blue,
        red
    );
}

Conic Gradient برای مواردی مانند:

  • نمودارهای دایره‌ای

  • Color Wheel

  • Progress Indicator

  • عناصر تزئینی

  • افکت‌های چرخشی

کاربرد دارد.

تعیین زاویه شروع

می‌توانیم نقطه شروع را نیز مشخص کنیم:

.box {
    background: conic-gradient(
        from 45deg,
        red,
        blue,
        purple
    );
}

همچنین می‌توانیم مرکز Gradient را تغییر دهیم:

.box {
    background: conic-gradient(
        from 45deg at 30% 30%,
        red,
        blue,
        purple
    );
}

ساخت Progress Circle با Conic Gradient

یکی از کاربردهای بسیار جالب Conic Gradient ساخت Progress Circle است.

<div class="progress">
    <span>75%</span>
</div>
.progress {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: conic-gradient(
        #ff7a00 0 75%,
        #e5e7eb 75% 100%
    );

    display: grid;
    place-items: center;
}

برای قرار دادن یک مرکز سفید و تبدیل آن به حلقه می‌توانیم از pseudo-element استفاده کنیم:

.progress {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: conic-gradient(
        #ff7a00 0 75%,
        #e5e7eb 75% 100%
    );

    display: grid;
    place-items: center;
}

.progress::before {
    content: "75%";

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: white;

    display: grid;
    place-items: center;
}

Gradientهای شفاف

یکی از مهم‌ترین تکنیک‌ها، ترکیب Gradient با شفافیت است.

برای مثال:

.hero {
    background: linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.1)
    );
}

این روش برای ایجاد Overlay روی تصویر بسیار مناسب است.

Gradient روی تصویر

می‌توانیم Gradient و تصویر را در یک background ترکیب کنیم.

.hero {
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.2)
        ),
        url("hero.jpg");

    background-size: cover;
    background-position: center;
}

در اینجا دو Background داریم:

  1. Gradient

  2. تصویر

Gradient روی تصویر قرار می‌گیرد و باعث می‌شود متن روی تصویر خواناتر باشد.

این تکنیک برای Hero Section بسیار کاربردی است.

چند Background در CSS

همان‌طور که دیدیم، می‌توان چند Gradient را با هم ترکیب کرد.

.section {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 120, 0, 0.2),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(124, 58, 237, 0.2),
            transparent 30%
        ),
        #111827;
}

ترتیب مهم است.

Background اول در لایه بالاتر قرار می‌گیرد و Backgroundهای بعدی زیر آن قرار می‌گیرند.

Gradient و Border Radius

Gradient به خوبی با border-radius ترکیب می‌شود.

.card {
    width: 300px;
    height: 200px;

    border-radius: 24px;

    background: linear-gradient(
        135deg,
        #ff7a00,
        #7c3aed
    );
}

نتیجه یک کارت با گوشه‌های گرد و پس‌زمینه Gradient خواهد بود.

Gradient Border

یکی از تکنیک‌های جذاب، ایجاد Border گرادیانی است.

یک روش کاربردی استفاده از دو Background است:

.card {
    padding: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #7c3aed
        );
}

سپس یک عنصر داخلی ایجاد می‌کنیم:

<div class="card">
    <div class="card-content">
        محتوای کارت
    </div>
</div>
.card-content {
    padding: 30px;

    border-radius: 18px;

    background: #111827;
}

لایه بیرونی Gradient است و محتوای داخلی روی آن قرار می‌گیرد؛ در نتیجه ظاهر Border گرادیانی ایجاد می‌شود.

Gradient Text

یکی از تکنیک‌های محبوب در طراحی مدرن، ایجاد متن گرادیانی است.

HTML:

<h1 class="gradient-text">
    طراحی وب مدرن
</h1>

CSS:

.gradient-text {
    background: linear-gradient(
        90deg,
        #ff7a00,
        #ff3d81,
        #7c3aed
    );

    background-clip: text;
    color: transparent;
}

در این حالت Gradient روی متن اعمال می‌شود.

background-clip مشخص می‌کند Background در کدام محدوده نمایش داده شود و مقدار text باعث می‌شود Background در محدوده متن نمایش داده شود.

برای سازگاری با برخی مرورگرها می‌توان در پروژه‌های واقعی از نسخه WebKit نیز استفاده کرد:

.gradient-text {
    background: linear-gradient(
        90deg,
        #ff7a00,
        #ff3d81,
        #7c3aed
    );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

ساخت دکمه مدرن با Gradient

یکی از ساده‌ترین کاربردهای Gradient، ساخت Button است.

<a href="#" class="gradient-button">
    مشاهده خدمات
</a>
.gradient-button {
    display: inline-block;

    padding: 14px 28px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #ff7a00,
        #ff3d81
    );

    color: white;

    text-decoration: none;

    font-weight: 700;
}

برای Hover:

.gradient-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gradient-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(255, 122, 0, 0.25);
}

ساخت یک کارت خدمات مدرن

حالا یک مثال واقعی‌تر ایجاد کنیم.

HTML

<div class="service-card">

    <div class="service-icon">
        WEB
    </div>

    <h2>
        طراحی سایت
    </h2>

    <p>
        طراحی وب‌سایت مدرن، سریع و Responsive
        برای کسب‌وکار شما.
    </p>

    <a href="#" class="service-button">
        مشاهده خدمات
    </a>

</div>

CSS

.service-card {
    position: relative;

    width: 320px;

    padding: 30px;

    border-radius: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 122, 0, 0.18),
            transparent 30%
        ),
        #111827;

    color: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.25);
}

.service-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff3d81
        );

    font-weight: 800;
}

.service-card h2 {
    margin-top: 24px;
}

.service-card p {
    color: #cbd5e1;
    line-height: 1.8;
}

.service-button {
    display: inline-block;

    margin-top: 20px;

    padding: 12px 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff3d81
        );

    color: white;

    text-decoration: none;
}

در این مثال چند تکنیک را هم‌زمان استفاده کردیم:

  • radial-gradient()

  • linear-gradient()

  • border-radius

  • box-shadow

  • رنگ‌های شفاف

  • دکمه گرادیانی

  • طراحی Dark

  • ساختار کارت

این ترکیب‌ها پایه بسیاری از رابط‌های کاربری مدرن هستند.

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

CSS علاوه بر Gradientهای معمولی، نسخه‌های تکرارشونده نیز دارد:

background: repeating-linear-gradient(
    45deg,
    #111827 0,
    #111827 10px,
    #1f2937 10px,
    #1f2937 20px
);

همچنین:

repeating-radial-gradient()

و:

repeating-conic-gradient()

نیز وجود دارند.

این Gradientها بیشتر برای ساخت Pattern و Backgroundهای تزئینی کاربرد دارند.

چه زمانی از Gradient استفاده کنیم؟

Gradient ابزار بسیار قدرتمندی است، اما نباید در همه قسمت‌های سایت استفاده شود.

کاربردهای مناسب

Gradient برای موارد زیر بسیار مناسب است:

  • Hero Section

  • دکمه‌های مهم

  • کارت‌های ویژه

  • Backgroundهای تزئینی

  • Overlay تصاویر

  • متن‌های مهم

  • Progress Indicator

  • Borderهای خاص

  • المان‌های Decorative

اما اگر تمام صفحه را با Gradient پر کنیم، طراحی ممکن است شلوغ و غیرحرفه‌ای شود.

گاهی یک رنگ ساده بهترین انتخاب است.

انتخاب رنگ مناسب برای Gradient

یکی از اشتباهات رایج، انتخاب رنگ‌هایی است که هیچ هماهنگی با یکدیگر ندارند.

مثلاً:

background:
    linear-gradient(
        red,
        green,
        blue,
        yellow,
        purple
    );

از نظر فنی درست است، اما برای یک رابط کاربری حرفه‌ای معمولاً انتخاب مناسبی نیست.

بهتر است از یک Palette مشخص استفاده کنیم.

مثلاً:

background:
    linear-gradient(
        135deg,
        #ff7a00,
        #ff3d81
    );

یا:

background:
    linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

توجه به خوانایی متن

اگر متن روی Gradient قرار دارد، باید Contrast مناسب داشته باشد.

مثلاً:

.hero {
    color: white;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.25)
        ),
        url("hero.jpg");
}

در این حالت Overlay تیره کمک می‌کند متن سفید بهتر دیده شود.

زیبایی Gradient نباید باعث کاهش خوانایی محتوا شود.

اشتباهات رایج در استفاده از Gradient

۱. استفاده از رنگ‌های بیش از حد

Gradientهای بسیار رنگارنگ معمولاً تمرکز کاربر را از بین می‌برند.

۲. استفاده از Gradient در همه قسمت‌ها

اگر Button، Card، Header، Footer، Background و Text همگی Gradient داشته باشند، طراحی شلوغ می‌شود.

۳. Contrast ضعیف

رنگ متن باید در برابر Background به اندازه کافی قابل تشخیص باشد.

۴. انتخاب جهت نامناسب

جهت Gradient باید با طراحی کلی هماهنگ باشد.

مثلاً در یک Hero ممکن است:

linear-gradient(135deg, ...)

نتیجه بهتری نسبت به یک Gradient کاملاً افقی داشته باشد.

۵. استفاده از Gradient به جای رنگ ساده

هر عنصر الزاماً به Gradient نیاز ندارد.

گاهی:

background: #ff7a00;

از:

background: linear-gradient(...);

تمیزتر و حرفه‌ای‌تر است.

پروژه عملی: طراحی Hero مدرن

حالا یک Hero ساده اما مدرن ایجاد می‌کنیم.

HTML

<section class="hero">

    <div class="hero-content">

        <span class="hero-label">
            طراحی وب مدرن
        </span>

        <h1>
            وب‌سایت حرفه‌ای برای رشد کسب‌وکار شما
        </h1>

        <p>
            طراحی رابط کاربری سریع، مدرن و Responsive
            با استفاده از تکنولوژی‌های روز وب.
        </p>

        <div class="hero-actions">
            <a href="#" class="primary-button">
                شروع کنید
            </a>

            <a href="#" class="secondary-button">
                مشاهده نمونه‌کارها
            </a>
        </div>

    </div>

</section>

CSS

.hero {
    min-height: 600px;

    display: flex;
    align-items: center;

    padding: 60px 8%;

    color: white;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 122, 0, 0.3),
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(124, 58, 237, 0.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #111827
        );
}

.hero-content {
    max-width: 700px;
}

.hero-label {
    display: inline-block;

    padding: 8px 14px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff3d81
        );

    font-size: 14px;
    font-weight: 700;
}

.hero h1 {
    margin: 24px 0 18px;

    font-size: clamp(2.5rem, 6vw, 5rem);

    line-height: 1.1;
}

.hero p {
    max-width: 600px;

    color: #cbd5e1;

    font-size: 18px;

    line-height: 1.9;
}

.hero-actions {
    display: flex;

    gap: 14px;

    margin-top: 30px;
}

.primary-button,
.secondary-button {
    padding: 14px 24px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;
}

.primary-button {
    color: white;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff3d81
        );
}

.secondary-button {
    color: white;

    border: 1px solid
        rgba(255, 255, 255, 0.2);

    background:
        rgba(255, 255, 255, 0.05);
}

در همین مثال ساده، چند نوع Gradient را با یکدیگر ترکیب کرده‌ایم:

  • radial-gradient() برای ایجاد نورهای تزئینی

  • linear-gradient() برای Background اصلی

  • Gradient برای Label

  • Gradient برای Button

  • رنگ‌های شفاف برای ایجاد عمق

این نوع ترکیب یکی از روش‌های رایج در طراحی رابط‌های کاربری مدرن است.

تمرین‌های این مقاله

تمرین ۱

یک مربع ایجاد کنید و روی آن یک Gradient افقی از قرمز به آبی قرار دهید.

تمرن ۲

یک کارت بسازید و از radial-gradient() برای ایجاد یک نور در گوشه بالا سمت راست آن استفاده کنید.

تمرین ۳

یک Button با Gradient سه‌رنگ طراحی کنید.

تمرین ۴

یک Progress Circle با conic-gradient() بسازید که مقدار 65% را نمایش دهد.

تمرین ۵

یک عنوان ایجاد کنید که رنگ آن Gradient باشد.

تمرین ۶

یک تصویر Background قرار دهید و با استفاده از Gradient یک Overlay تیره روی آن ایجاد کنید.

جمع‌بندی

Gradient یکی از ابزارهای قدرتمند CSS برای ایجاد رابط‌های کاربری مدرن است. با استفاده از آن می‌توانیم بدون ساخت تصاویر اضافی، پس‌زمینه‌های جذاب، دکمه‌های مدرن، Overlay، Borderهای خاص، متن‌های رنگی و عناصر تزئینی ایجاد کنیم.

مهم‌ترین Gradientهایی که در این مقاله یاد گرفتیم عبارت‌اند از:

linear-gradient()

برای تغییر رنگ در امتداد یک خط.

radial-gradient()

برای انتشار رنگ از یک نقطه مرکزی.

conic-gradient()

برای تغییر رنگ به صورت چرخشی حول یک مرکز.

همچنین یاد گرفتیم که می‌توان Gradientها را با یکدیگر، تصاویر، border-radius، background-clip و سایر ویژگی‌های CSS ترکیب کرد.

نکته مهم این است که Gradient صرفاً یک افکت تزئینی نیست؛ اگر درست استفاده شود، می‌تواند به ایجاد سلسله‌مراتب بصری، تمرکز کاربر و هویت بصری بهتر کمک کند.

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.