Spark
Sign In
Skill

Gradient Design

Design-style skill for Gradient Design: animated mesh gradients, gradient text and borders, with careful color-blend selection.

Get skill
Antigravity
Own this? Claim it

Maintainer of this project? Claim this page to edit the listing.

81
Spark score
out of 100
Updated 28 days ago
Version 13.5.0
Add to Favorites

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-gradient-design | bash

Overview

Gradient Design

A design-style skill for Gradient Design - animated mesh gradients, gradient-filled text, and gradient borders with careful color-blend selection to avoid muddy transitions - with matching Web CSS and SwiftUI implementations. Use it for hero sections, marketing pages, or creative-tool branding that wants energetic, animated color as the primary visual, with minimal structure elsewhere to let the gradients breathe.

What it does

Gradient Design is a design-style child skill ('color in motion - fluid transitions that add energy and depth to flat surfaces'), part of the design-it family and not meant to be triggered directly. Three core principles: Gradients as the Primary Visual (backgrounds, buttons, text, and borders all use gradients instead of solid colors), Analogous or Complementary Blends (gradient colors must be chosen carefully so the transition doesn't turn muddy - blending red directly to green creates a muddy brown midpoint, so the fix is routing through yellow: red to yellow to green), and Subtle Animation (background gradients should slowly shift and rotate rather than sit static).

When to use - and when NOT to

Use it when the user's request matches this vibrant, energetic, color-in-motion aesthetic - hero sections, marketing pages, or creative tool branding that wants to feel alive rather than static. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Inputs and outputs

Visual DNA uses Warm Tech (blues to oranges) or custom vibrant pairs like Purple to Coral or Deep Blue to Cyan, clean heavy sans-serifs that mask well with a gradient fill, and a minimal UI structure (glass panels or white/black cards) so the gradients have room to breathe rather than competing with busy layout. The web implementation animates a large mesh-like gradient background by oversizing it (background-size: 400% 400%) and shifting background-position through a keyframe loop, applies a gradient fill directly to bold headline text via background-clip: text with transparent fill color, and fakes a gradient border using an absolutely-positioned pseudo-element sized slightly larger than the card, sitting behind it in z-index.

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
.gradient-text {
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Integrations

SwiftUI reproduces the animated background by toggling a LinearGradient's start/end points between two diagonal states inside a withAnimation(.linear(duration: 5.0).repeatForever(autoreverses: true)) loop, and applies the same gradient-text technique via .foregroundStyle(LinearGradient(...)) on bold display text - matching the web's CSS-clip trick with a native SwiftUI modifier instead of a workaround.

Who it's for

Designers and developers building a vibrant hero section, marketing page, or creative-tool brand identity that wants energetic, animated color as the primary visual element - with the color science handled correctly so blends stay vivid instead of turning muddy in the middle.

Source README

Gradient Design

"Color in motion. Fluid transitions that add energy and depth to flat surfaces."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

  1. Gradients are the Primary Visual: Backgrounds, buttons, text, and borders all use gradients instead of solid colors.
  2. Analogous or Complementary Blends: Gradients must be carefully chosen so the transition colors don't become muddy (e.g., blending red to green creates a muddy brown in the middle. Blend red to yellow to green instead).
  3. Subtle Animation: Background gradients should slowly shift and rotate.

Visual DNA

  • Colors: Warm Tech (blues to oranges) or create custom vibrant pairs (e.g., Purple to Coral, Deep Blue to Cyan).
  • Typography: Clean, heavy sans-serifs that can be easily masked with a gradient fill.
  • Layout: Keep the UI structure minimal (glass panels or white/black cards) to let the gradients breathe.

Web Implementation

  • CSS Example:
body {
  /* Complex mesh-like animated gradient */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: #fff;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(90deg, #F9D423 0%, #FF4E50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4rem;
  font-weight: 900;
}

.gradient-border-card {
  background: #ffffff;
  color: #333;
  padding: 32px;
  border-radius: 12px;
  position: relative;
  /* Use a pseudo-element for the gradient border */
}
.gradient-border-card::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  background: linear-gradient(90deg, #8A2387, #E94057, #F27121);
  z-index: -1;
  border-radius: 15px;
}

App Implementation

SwiftUI

struct GradientDesignView: View {
    @State private var animateGradient = false
    
    var body: some View {
        ZStack {
            // Animated Background Gradient
            LinearGradient(
                colors: [Color(hex: "ee7752"), Color(hex: "e73c7e"), Color(hex: "23a6d5"), Color(hex: "23d5ab")],
                startPoint: animateGradient ? .topLeading : .bottomLeading,
                endPoint: animateGradient ? .bottomTrailing : .topTrailing
            )
            .ignoresSafeArea()
            .onAppear {
                withAnimation(.linear(duration: 5.0).repeatForever(autoreverses: true)) {
                    animateGradient.toggle()
                }
            }
            
            VStack(spacing: 40) {
                // Gradient Text
                Text("VIBRANT")
                    .font(.system(size: 60, weight: .black))
                    .foregroundStyle(
                        LinearGradient(
                            colors: [Color(hex: "F9D423"), Color(hex: "FF4E50")],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                
                // Gradient Border Card
                Text("Gradient Border")
                    .padding()
                    .frame(width: 250, height: 150)
                    .background(Color.white)
                    .cornerRadius(12)
                    .overlay(
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(
                                LinearGradient(
                                    colors: [Color(hex: "8A2387"), Color(hex: "E94057"), Color(hex: "F27121")],
                                    startPoint: .leading, endPoint: .trailing
                                ),
                                lineWidth: 3
                            )
                    )
            }
        }
    }
}
  • .foregroundStyle(LinearGradient(...)) makes gradient text incredibly easy in modern SwiftUI.
  • Use .stroke(LinearGradient(...)) inside an .overlay to create gradient borders.

Flutter

class GradientDesignScreen extends StatefulWidget {
  @override
  State<GradientDesignScreen> createState() => _GradientDesignScreenState();
}

class _GradientDesignScreenState extends State<GradientDesignScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Alignment> _topAlignment;
  late Animation<Alignment> _bottomAlignment;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat(reverse: true);
    _topAlignment = TweenSequence<Alignment>([
      TweenSequenceItem(tween: AlignmentTween(begin: Alignment.topLeft, end: Alignment.topRight), weight: 1),
    ]).animate(_controller);
    _bottomAlignment = TweenSequence<Alignment>([
      TweenSequenceItem(tween: AlignmentTween(begin: Alignment.bottomRight, end: Alignment.bottomLeft), weight: 1),
    ]).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, _) {
          return Container(
            width: double.infinity,
            decoration: BoxDecoration(
              // Animated Background Gradient
              gradient: LinearGradient(
                begin: _topAlignment.value,
                end: _bottomAlignment.value,
                colors: const [Color(0xFFee7752), Color(0xFFe73c7e), Color(0xFF23a6d5), Color(0xFF23d5ab)],
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Gradient Text
                ShaderMask(
                  blendMode: BlendMode.srcIn,
                  shaderCallback: (bounds) => const LinearGradient(
                    colors: [Color(0xFFF9D423), Color(0xFFFF4E50)],
                  ).createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
                  child: const Text('VIBRANT', style: TextStyle(fontSize: 60, fontWeight: FontWeight.w900, color: Colors.white)),
                ),
                const SizedBox(height: 40),
                // Gradient Border Card
                Container(
                  width: 250, height: 150,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    gradient: const LinearGradient(colors: [Color(0xFF8A2387), Color(0xFFE94057), Color(0xFFF27121)]),
                  ),
                  padding: const EdgeInsets.all(3), // Border width
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12)),
                    alignment: Alignment.center,
                    child: const Text('Gradient Border'),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
  • Flutter text gradients require ShaderMask with BlendMode.srcIn.
  • To animate a gradient background, animate the Alignment values of the LinearGradient.

React Native

// REQUIRES: expo-linear-gradient OR react-native-linear-gradient
import { LinearGradient } from 'expo-linear-gradient';
import MaskedView from '@react-native-masked-view/masked-view';

const GradientDesignScreen = () => {
  return (
    <LinearGradient
      colors={['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab']}
      start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      {/* Gradient Text */}
      <MaskedView
        style={{ height: 80, width: '100%', flexDirection: 'row' }}
        maskElement={
          <View style={{ backgroundColor: 'transparent', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 60, fontWeight: '900', color: 'black' }}>VIBRANT</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#F9D423', '#FF4E50']}
          start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
          style={{ flex: 1 }}
        />
      </MaskedView>

      <View style={{ marginTop: 40 }}>
        {/* Gradient Border Card */}
        <LinearGradient
          colors={['#8A2387', '#E94057', '#F27121']}
          start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
          style={{ padding: 3, borderRadius: 15 }}
        >
          <View style={{ backgroundColor: '#FFF', width: 250, height: 150, borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Gradient Border</Text>
          </View>
        </LinearGradient>
      </View>
    </LinearGradient>
  );
};
  • Gradient text in React Native is notoriously annoying. You must use @react-native-masked-view/masked-view to mask a LinearGradient with a <Text> node.
  • Gradient borders are achieved by nesting a solid view inside a LinearGradient with a small padding (e.g., padding: 3).

Jetpack Compose

@Composable
fun GradientDesignScreen() {
    // Animated Background
    val infiniteTransition = rememberInfiniteTransition()
    val offset by infiniteTransition.animateFloat(
        initialValue = 0f, targetValue = 1000f,
        animationSpec = infiniteRepeatable(tween(5000, easing = LinearEasing), RepeatMode.Reverse)
    )

    val bgBrush = Brush.linearGradient(
        colors = listOf(Color(0xFFee7752), Color(0xFFe73c7e), Color(0xFF23a6d5), Color(0xFF23d5ab)),
        start = Offset(offset, 0f), end = Offset(offset + 500f, 1000f)
    )

    Box(
        modifier = Modifier.fillMaxSize().background(bgBrush),
        contentAlignment = Alignment.Center
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            // Gradient Text
            val textBrush = Brush.horizontalGradient(listOf(Color(0xFFF9D423), Color(0xFFFF4E50)))
            Text(
                text = "VIBRANT",
                style = TextStyle(brush = textBrush, fontSize = 60.sp, fontWeight = FontWeight.Black)
            )

            Spacer(Modifier.height(40.dp))

            // Gradient Border Card
            val borderBrush = Brush.horizontalGradient(listOf(Color(0xFF8A2387), Color(0xFFE94057), Color(0xFFF27121)))
            Box(
                modifier = Modifier
                    .size(250.dp, 150.dp)
                    .border(3.dp, borderBrush, RoundedCornerShape(12.dp))
                    .background(Color.White, RoundedCornerShape(12.dp)),
                contentAlignment = Alignment.Center
            ) {
                Text("Gradient Border")
            }
        }
    }
}
  • Compose handles gradients beautifully via Brush.
  • You can pass a Brush directly into a TextStyle for gradient text, or into a Modifier.border() for gradient borders.

Do's and Don'ts

  • DO: Use multi-stop gradients (3 or 4 colors) rather than just simple A-to-B gradients for a more modern, rich look.
  • DON'T: Apply gradients to tiny text or thin icons, they will lose legibility immediately.

Limitations

  • This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
  • Ensure appropriate contrast ratios and responsive behaviors are verified separately.

FAQ

Common questions

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.